<select name=\"大众mochu\"大众 id=\"大众mochu\公众> <option value=\"大众1\"大众>下拉1</option> <option value=\"大众2\"大众>下拉2</option> <option value=\公众3\"大众>下拉3</option> <option value=\"大众4\"大众>下拉4</option></select><script> $('#mochu').click(function(){ console.log($(this).val()); });</script>
点击下拉后,输出信息如下:
通过上图可以创造,如果 select 元素的下拉菜单利用 click 事宜的话,会输出两次结果,也就说在展开下拉菜单之前与选择下拉菜单之后分别触发了 click 事宜,以是 select 下拉选项的触发事宜,不能利用 click,而利用 change 事宜。
javascript select 元素的触发事宜示例代码
<select name=\"大众mochu\"大众 onchange=\"大众GetVal(this)\公众> <option value=\公众下拉1\"大众>选项1</option> <option value=\"大众下拉2\"大众>选项2</option> <option value=\公众下拉3\"大众>选项3</option> <option value=\"大众下拉4\"大众>选项4</option></select><script> function GetVal(obj){ //代表的是选中项的index索引 var index = obj.selectedIndex; //代表的是选中项的的值 var val = obj.options[index].value; //代表的是选中项的text var txt = obj.options[index].text; console.log(index); console.log(val); console.log(txt); }</script>
输出结果:
jquery select 元素的触发事宜
html示例代码:
<select name=\"大众mochu\"大众 id=\"大众mochu\公众> <option value=\"大众red\"大众>颜色1</option> <option value=\"大众green\"大众>颜色2</option> <option value=\"大众blur\"大众>颜色3</option></select><script> $('#mochu').change(function(){ //输出选中项的值 console.log($(this).val()); });</script>
输出结果: