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:是否有子信息