Question

我有一个selectized.js多重选择列表，它是用用户要选择的所有选项创建的。我使用以下命令以编程方式选择存储在数据库中的每个选项，但是除了选择选项之外，还会显示选项列表：

// Create a variable that 'points' to the listSelect selelect list that
// has been converted to a selectize list.  The list already has all of the
// options in it.

$listSelectize = $( '#listSelect' );

// Clear all previously selected options ...

$listSelectize[ 0 ].selectize.clear( true ); // Clear previous selections.

// Select each list option that was saved in the database ...

// This is a test example ...

$listSelectize[ 0 ].selectize.addItem( 'option_one', true );

// The above command correctly select the option with the 'option_one' value,
// but it also causes the option list drop-down to be displayed.

// I've tried using the following commands to close the option list, but the
// drop-down list remains open.

$listSelectize[ 0 ].selectize.close();

// I've noticed that if after the form becomes interactive, that I can click
// it and the list closes, so the next few commands try to simulate this
// programmatically, but the list remains open, anyway.

$listSelectize[ 0 ].selectize.blur();  // Documentation says this should
                                       // force the focus away from the list.

$listSelectize[ 0 ].blur();            // This should do the same.

document.getElementById( 'firstInput' ).focus();

有没有一种方法可以选择打开而不打开选项下拉列表？

如果没有，该如何关闭它，以便当表单可用时用户看不到它？

Answer 1

无法从代码示例中分辨出为什么选择菜单保持打开状态。请参阅下面的工作片段，其中自动选择了一个选择选项，但未打开选择菜单。还添加了一些按钮来触发select open()和close()函数，以便您也可以对其进行测试。您可能需要检查问题中未包含的jquery，js或css冲突，以找到问题的根源。

const options = [
  {id: 1, name: "option1"},
  {id: 2, name: "option2"},
  {id: 3, name: "option3"}
];
  
const select = $('#select1').selectize({
  options: options,
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  persist: false,
  create: true
});

const openBtn = document.querySelector('#open');
const closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', function(event) {
  select[0].selectize.open();
});
closeBtn.addEventListener('click', function(event) {
  select[0].selectize.close();
});

select[0].selectize.addItem('option2');

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
  </head>

  <body>

    <button id="open">Open</button>
    <button id="close" style="margin-bottom: 8px;">Close</button>
    <form action="" method="POST">
      <input id="select1" name="select1" type="text" />
      <button type="submit">Submit</button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>

  </body>

</html>

Answer 2

将Bravo转换为benvc。您对onItemAdd itemAdd函数中的refreshItmes（）和refreshOptions（）方法的观察是即时的。正如我在上一条评论中指出的那样，当我希望“无声地”重置选择列表中的项目时，我添加了一个交互式变量并将其设置为false，然后在完成重置后将interactive设置为true。然后，我添加了一条if语句，该语句包含了刷新调用和itemAdd函数中的列表滚动，因此这些语句仅在Interactive的值为true时才执行。

再次感谢！

如何关闭selectize.js选择列表中的选项列表？

2 个答案: