今天在寫一個關于 html 中 select 下拉元素選擇的動態事件時,發現如果使用 javascript 中的 click 事件的話,會被執行兩次。網上查了一下資料,發現 select 元素下拉選中事件并不適合使用 click 來觸發,而要使用 change 事件。

select元素下拉的click事件

html代碼

<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>

国产视频app點擊下拉后,輸出信息如下:

tml select 元素下拉菜單選中事件

通過上圖可以發現,如果 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>

輸出結果:

tml select 元素下拉菜單選中事件

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>

輸出結果:

tml select 元素下拉菜單選中事件