select下拉框的click和change事件

前端页面中经常会使用到select下拉框。操作select框时会发生click和change事件,且这两个事件有特定的执行顺序。
1.点击select框出现下拉列表,此为一次click点击事件。
2.选择下拉框中的某个选项,若将要选择的选项与正在框中的值不一样,此为一次change事件。点击选择上这个值,会先产生change事件,接着产生click事件。
3.若将要选择的选项与正在框中的值一样,不会产生change事件。点击选择上这个值,产生一次click事件。
实验验证,初始点击select框不会产生click事件,以后点击才会

<select id="cputurbocheck">
<option value="LongTerm">Long Term</option>
<option value="ShortTerm">Short Term</option>
</select>
	
	$("#cputurbocheck").click(function(e){
							console.log("click");
						});
						
       $("#cputurbocheck").change(function(e){
							console.log("change");
				        });

在这里插入图片描述

  • 9
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,下拉框change事件可以通过@change来定义。在方法中,可以直接接收选中项的标识参数。例如,可以使用以下代码来定义下拉框change事件: ```html <template> <el-select v-model="value" placeholder="请选择" @change="onChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { data() { return { value: '', options: \[ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } \] }; }, methods: { onChange(value) { console.log(value); } } }; </script> ``` 在上述代码中,@change事件绑定了onChange方法。当下拉框的选中项发生变化时,onChange方法会被调用,并且会接收到选中项的标识参数value。在方法中,可以根据需要对选中项进行处理。 #### 引用[.reference_title] - *1* *2* [Vue 下拉框值变动事件传多个参数](https://blog.csdn.net/qq_37770674/article/details/125703494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【Vue】补充一些需要注意的小点](https://blog.csdn.net/Qxn530/article/details/127381730)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值