8

我有一个可搜索的列表，使用 JQuery 插件创建，来自： http: //plugins.jquery.com/searchit/

但是我希望在列表框第一次出现时默认选择一些值。即使我在选项标签中提到了“选择”（下面是罗克福德）。这部分不起作用。

请在此处查看示例：

http://jsfiddle.net/QuYJD/22/

$("select").searchit( { textFieldClass: 'searchbox' } );

    Type the search text:
    <br/>
    <select id="listBox1">
      <option>Robinhood</option>
      <option selected >Rockford</option>
      <option>Rome</option>
      <option>Ronda</option>
      <option>Rondon</option>
      <option>Rondonopolis</option>
      <option>Rongelap</option>
    </select>

任何的想法？或任何其他解决方案...

4

2 回答 2

28

您可以检查所选的 jQuery 插件。它更加用户友好，并且具有各种漂亮的用户界面。

它具有您正在寻找的功能。请前往以下链接了解更多详情

http://harvesthq.github.io/chosen/

于 2013-07-27T17:42:39.687 回答
3

有点hacky的方式

也许你可以在你初始化插件之后做这样的事情：

$(".searchbox").val($("#listBox1 :selected").val())

因为这个插件似乎让你select变成了这样：

<input type="textbox" id="__searchit2" class="searchbox">
<div id="__searchitWrapper2" style="display: none; vertical-align: top; overflow: hidden; border: 1px solid rgb(128, 128, 128); position: absolute;">
 <select id="listBox2" style="padding: 5px; margin: -5px -20px -5px -5px;">
  <option>Robinhood</option>
  <option>Rockford</option>
  <option selected="">Rome</option>
  <option>Ronda</option>
  <option>Rondon</option>
  <option>Rondonopolis</option>
  <option>Rongelap</option>
 </select>
</div>

插件更改

我在插件中添加了另一个选项，名为selected. 如果您将其设置为true，则文本框将显示您选择的option。只需添加这个额外的选项：

$("select").searchit({
      textFieldClass: 'searchbox',
      selected: true
 });

演示：http: //jsfiddle.net/hungerpain/QuYJD/23/

于 2013-07-27T17:34:29.330 回答