Question

我使用jquery select2插件显示<li>个项目列表，但是在输入文本字段而不是<select>上。这是我的HTML：

<div class="item-holder">
    <input type="hidden" name="item" id="item" value=""/>
    <input type="text" name="item_name" id="item_name" placeholder="Select Item" autocomplete="off"/>
    <ul class="item-list">
        <ul class="item-list list">
            <li>item 1</li>
            <li>item 2 </li>
            <li>item 3 </li>
            <li>item 4 </li>                                
        </ul>
    </ul>
</div>

我的代码就是这样：

$('#item_name').select2({ width: '185px', placeholder: "Select Item", allowClear : true});

$("#item_name").on('click', function(e) {
    $(".item-list").toggle();
});

var options = {
    valueNames : [ 'item_name' ]
};

var brand_List = new List('item_holder', options);

到目前为止，一切都很顺利。当我从列表中选择一个项目，用键盘清除选择，并且想要从列表中选择另一个选项时，列表不会出现。好像select2列表似乎没有第二次出现。我也不能看到＆＃39;清楚＆＃39;如果我启用allowClear : true选项，则按钮。什么出错了？

任何帮助将不胜感激。谢谢。

Answer 1

看起来您基本上是从下拉菜单中为select2构建选项。在这种情况下，您可以从列表选项中创建一个数组，然后摆脱下拉列表。

var arr = []; 
$(".item-list.list li").each(function(i)
{
  var obj = {
    id: i,
    text: $(this).text()
  };
   arr.push(obj);
});

$('ul.item-list').remove();

$('#item_name').select2({
    width: '185px',
    allowClear: true,
    multiple: true,
    autocomplete: 'off',
    maximumSelectionSize: 1,
    placeholder: "Select Item",    
    data: arr  
});

示例：http://jsfiddle.net/DinoMyte/fyhsz9ra/427/

在文本字段上首次选择后，选择2不会打开

1 个答案: