Jquery JS下拉框点击触发事件 .change / .on('change') 以及选定的option值和文本内容提取

第一步：创建一个select下拉框 

在html文件里面

<select id="cputurbocheck">
<option value="LongTerm">Long Term</option>
<option value="ShortTerm">Short Term</option>
</select>

 

第二步：加change

在.js文件

要明确，想添加一个option的触发事件,在option中添加onclick 点击就是不会触发事件的

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

Jquery写法一：

.change(function(）)

$("#cputurbocheck").click(function(e){
    console.log("click");
});
						
$("#cputurbocheck").change(function(e){
    console.log("change");
});

​

绑定下拉框的id  “cputurbocheck”然后告诉他当触发click和change的时候该干什么。

Jquery写法二：

.on("change",function（）)

$('#id').on('change',function(){console.log('select改变了')})

当然这里的'#id' 也要拿 '#cputurbocheck'替换才能使那个下拉框失效，意思就是id就是你自己设定的下拉框id名称。

 

第三步：提取选中option的val和text

function showMeTheText(){
    var selectedOption = $("#yourSelectedId option:selected");
    console.log(selectedOption.val(), selectedOption.text());
  }

注意：

如果要用自己上面定义的函数，比如 showMeTheText

千万不能在函数名后面加括号     showMeTheText() 

要这样：

$('#id').on('change', showMeTheText)

 

提示:

console.log 是一个常用javascript调试语句，就像print一样

然后这个打出来的语句在浏览器的控制台查看，注意是浏览器的不是编辑器的。浏览器按下F12点Console就可以看到。