使用ul和input实现带搜索效果的下拉框插件。
产生问题:点击ul时,下拉列表偶尔会出现闪现问题,求解决思路
html代码如下:
下拉框图片:
html 代码:
<label class="label">上级药品类别:</label>
<span class="simulate-select" style="width: 190px;">
<input class="text" placeholder="--请选择--" style="width: 170px;">
<i class="icon-grid icon-grid-fold-gray" style="position: absolute; top: 1px; left: 170px;">
</i>
<select name="upperClass" style="display: none;">
<option value="">--请选择--</option>
<option value="10033">asd</option>
<option value="111">中药</option>
<option value="20044">西药</option>
<option value="222">夏桑菊</option>
</select>
<ul class="simulate-select-lists" style="width: 189px; display: none;">
<li class="simulate-select-list" value="">--请选择--</li>
<li value="10033" class="simulate-select-list">asd</li>
<li value="111" class="simulate-select-list">中药</li>
<li value="20044" class="simulate-select-list">西药</li>
<li value="222" class="simulate-select-list">夏桑菊</li>
</ul>
</span>
现在有一个问题: 鼠标点击input框时,ul 时不时出不来
ul点击代码和消失代码如下:
this.target.closest(".simulate-select").on("click", function () {
console.log("select-click");
if (!t.isReadOnly) {
if (!t._hasLoad) {
if (!t.isApply) {
t._loadData();
t.isApply = true;
}
}
if( t.auto){
t.autoEvent();
}
t._show();
}
}).hover(null, function () {
console.log("select-hover");
if( t.auto){
var tempDisplay = t.target.find("option[value = '" +t.target.val() +"']").text();
var tempValue = t.target.closest(".simulate-select").find(".text").val();
if(tempDisplay == t.preText){
t.target.closest(".simulate-select").find(".text").val("");
t.target.closest(".simulate-select").find(".text").attr("placeholder", t.preText);
}else{
if( $.trim(tempValue) != tempDisplay ){
t.target.closest(".simulate-select").find(".text").val("");
t.target.closest(".simulate-select").find(".text").attr("placeholder", t.preText);
}
//t.target.closest(".simulate-select").find(".text").val(tempDisplay);
}
t.target.closest(".simulate-select").find(".text").blur();
}
t.target.closest(".simulate-select").find("ul").hide();
});
this.target 指的是select : <select name="upperClass" style="display: none;"></select>
闪现时控制台的打印结果是:
即ul连续执行了显示和消失事件。
不知道问题的产生原因,求教各位,谢谢
同时触发了两个事件吧,click点击时是不是<ul>标签显示出来了,然后鼠标移到ul上触发了select的鼠标离开事件?然后就关闭了