select-option點擊事件

select點擊事件（二次觸發問題）

問題1：連續兩次點擊同一個option時，不能觸發change事件。（value值沒有發生改變）

change事件：在元素數據發生變化時觸發。該事件適用於文本域（text field）,以及textarea和select元素。

當用於select元素時，change事件會在選擇某個選項時發生。當用於text field或textarea時，該事件會在元素失去焦點時發生。

 

原因：因為select下的option標簽是監聽不到點擊事件的，只能監聽select的點擊事件。

 

解決：用點擊事件去監聽（但是這里不能監聽option的點擊事件:因為select下的option標簽是監聽不到點擊事件的，只能監聽select的點擊事件。），所以這個解決方法pass。

 

問題2：當點擊select打開下拉框時，會觸發click事件，再次點擊某個option時會觸發第二次click事件。

解決:定義一個變量，初始值為0，點擊的時候判斷是否為第二次點擊

target事件屬性:

target事件屬性返回觸發事件的元素。

target屬性獲取最初發生事件的元素，currentTarget屬性始終引用事件偵聽器觸發事件的元素。

tagName是DOM對象的屬性，用於獲取DOM對象的標簽名，取出來是大寫的，nodeName，取出來的是小寫的。

寫法：變量.target.tagName

 

 

問題3：頁面加載完成自動觸發事件（）。

option標簽有個selected屬性，可以設置默認的選中項（僅僅只是設置一個數值）,不能觸發change事件，改變選中項select也不能觸發change事件,click也不能觸發change事件。

 

解決：頁面需要默認的事件，在設置完selected屬性或value后，需要用trigger方法來自動觸發事件。

trigger()方法：jQuery事件-trigger()方法

定義和用法：tigger()方法觸發被選元素的指定事件類型

觸發事件：規定被選元素要觸發的事件。

jQuery 事件 - trigger() 方法 (w3school.com.cn)

 

問題4:：選擇option后，需要再點擊一次select才能觸發事件。

 

解決:從chenge事件入手。連續選擇同一個option時，select的value值沒有發生變化，所以不能觸發change事件。所以可以設置在每次點擊select展開option前，把select的value的值變為-1（不是已有的value的值），就能觸發change事件，因此，click事件不能用，使用focus事件。

這樣做，在下一次點擊select時，select框內的值會被清空

優化解決：設置一個隱藏的option用來存放選中的值，select獲取焦點的時候（focus）框內的值不會被清空

<div class="main">
    <select name="" id="" class="select">
        <option value="1">111</option>
        <option value="2">2222</option>
        <option value="3">33333</option>
        <option value="4">444444</option>
    </select>
</div>
$('.select').on('change',function(){
    var val = $(this).val();
    console.log('請求服務端數據' + val);   //控制台輸出
    $(this).blur(); 
}).on('focus',function(){
    $(this).val(-1);
})

 

優化后：

<div class="main">
    <select name="" id="" class="select">
        <option value="1">111</option>
        <option value="2">2222</option>
        <option value="3">33333</option>
        <option value="4">444444</option>
        <option value="5" style="display: none;"></option>
    </select>
</div>
$('.select').on('change',function(){
    var val = $(this).val();
    console.log('請求服務端數據' + val);
    $(this).blur();
}).on('focus',function(){
    var selectText = $(this).find('option:selected').text();    //獲取select框內的值
    $(this).find('option[value=5]').text(selectText)    //將獲取的值存入隱藏的option中
    $(this).val(5); //輸出隱藏的option值（select框內的值不會在下一次點擊時消失）
})

 

原生js獲取select值的方法：

var obj = document.getElementById('select');
 
//獲取選中項的索引
var idx = obj.selectedIndex;
 
//獲取選中項的文本
var text = obj.options[index].text; 
 
//獲取選中項的value值
var value = obj.options[index].value;

參考：(29條消息) 前端開發——select的點擊事件muzimiaomiaopeng的博客-CSDN博客select 事件

 

<option>中的hassubinfo是什么？

<option hassubinfo="true"></option>

hassubinfo:是否有子信息