Jquery 在文本字段上第一次选择后选择2不打开

我使用jquery select2插件来显示

项的列表，但是显示在输入文本字段上，而不是

。这是我的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>

到目前为止，一切都很顺利。当我从列表中选择一个项目，用键盘清除选择，并想从列表中选择另一个选项时，列表不会出现。似乎

select2

列表不会再次出现。如果启用

allowClear:true

选项，也看不到“清除”按钮。出什么事了

---

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

看起来您基本上是在为下拉菜单中的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  
});

---

示例：

看起来您基本上是在为下拉菜单中的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  
});

---

---

示例：

如果打开开发人员工具并运行步骤，您会在控制台中看到错误吗？您好@Noctane，谢谢您的评论。我在控制台中没有看到任何错误。为什么要在输入字段的单击事件下拉列表中隐藏项目？@Zafar Dinmyte有一个很好的观点，当您使用

$（“.item list”）.toggle（）时，如果选择中没有任何内容，您的选择将不会打开您基本上是在选择中隐藏选项，切换将从显示切换到隐藏，然后返回。Hi@DinMyte是因为在进行选择之后，没有必要显示整个列表。它就像一个日期选择器插件，一旦你选择了一个日期，就不需要显示整个日历。那么在你看来，解决方案应该是什么呢？如果你打开开发者工具并运行你的步骤，你会在控制台中看到错误吗？嗨@Noctane谢谢你的评论。我在控制台中没有看到任何错误。为什么要在输入字段的单击事件下拉列表中隐藏项目？@Zafar Dinmyte有一个很好的观点，当您使用
$（“.item list”）.toggle（）时，如果选择中没有任何内容，您的选择将不会打开您基本上是在选择中隐藏选项，切换将从显示切换到隐藏，然后返回。Hi@DinMyte是因为在进行选择之后，没有必要显示整个列表。它就像一个日期选择器插件，一旦你选择了一个日期，就不需要显示整个日历。那么在你看来，解决方案应该是什么呢？嗨@Dinmyte，它奏效了。竖起大拇指！非常感谢你这么做。但是，我希望此输入文本框保持为输入框，而不是显示为下拉框。我们怎样才能达到预期的结果？当然。很乐意帮忙。Select2基本上是在与Select2字段交互时创建一个具有class='Select2-results'的动态ul对象。这就是API的工作原理。不确定这是否回答了你的问题。嗨@Dinmyte谢谢你的进一步解释。但是，我无法访问此数组的数据属性。由于这既不是选项列表，也不是我们创建的列表，因此如何访问其属性？说身份证和名字？只是想知道。使用.select2（'data'）提取select2数据。检查这里：Hi@Dinmyte它成功了。竖起大拇指！非常感谢你这么做。但是，我希望此输入文本框保持为输入框，而不是显示为下拉框。我们怎样才能达到预期的结果？当然。很乐意帮忙。Select2基本上是在与Select2字段交互时创建一个具有class='Select2-results'的动态ul对象。这就是API的工作原理。不确定这是否回答了你的问题。嗨@Dinmyte谢谢你的进一步解释。但是，我无法访问此数组的数据属性。由于这既不是选项列表，也不是我们创建的列表，因此如何访问其属性？说身份证和名字？只是想知道。使用.select2（'data'）提取select2数据。请点击此处：