tinyselect.js插件下拉框的选中功能解决

tinySelect.js是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。使用之后样子是这样的：



使用比较方便，定义一个select的下拉框，然后$("#trader").tinyselect();就把下拉框变成了上面这幅样子，支持ajax动态加载options。

<select id="trader" name="trader" >
<option id="peisongshang" value="peisongshang">配送商</option>
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>

</select>

$("#trader").tinyselect();

下方的文本框可以支持模糊查询，选中某行之后的getValue也没问题。

遇到的问题是：没法人工选中某一行，网上找了很多方法，比如：

$('#trader').get(0).selectedIndex=2;

$('#trader').val("peisongshang");

$("#trader option[text='配送商']").attr("selected", true);

$("#trader").find("option[text='配送商']").attr("selected","selected");

document.getElementById("peisongshang").selected="selected";

$("#trader").html("");//删了重新建

$("#trader").remove();//删了重新建

都没用，似乎已经失去了对这个select标签的控制。

后来发现可以这么写：

<span id="tradertd">

<select id="trader" name="trader" >
<option id="peisongshang" value="peisongshang">配送商</option>
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>

</select>

</span>

$("#tradertd").find("div[class='tinyselect']").remove();

$('#trader').get(0).selectedIndex=0;

$("#trader").tinyselect();

原因目测是因为tinyselect.js把原来那个下拉框隐藏了，然后又在同样的位置新建了一个上面那副样子的下拉框，这个新下拉框的class=tinyselect，貌似也会把选择的行也应用到原来的那个下拉框去。

所以解决方案是：把tinyselect新建的那个下拉框删了，选好第一行，再用tinyselect新建一个。