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

Javascript 如何关闭selectize.js选择列表中的选项列表?,javascript,selectize.js,Javascript,Selectize.js,我有一个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 i

我有一个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();
是否有一种方法可以在不打开选项下拉列表的情况下选择打开的选项


如果没有,我如何才能关闭它,以便用户在表单可用时看不到它?

无法从代码示例中看出选择菜单保持打开的原因。请参阅下面的工作代码段,其中自动选择了选择选项,但未打开选择菜单。还添加了几个按钮来触发selectize打开和关闭功能,以便您也可以测试这些功能。您可能需要检查问题中未包含的相互冲突的jquery、js或css,以找到问题的根源

常量选项=[ {id:1,name:option1}, {id:2,name:option2}, {id:3,name:option3} ]; 常量select=$'select1'。选择{ 选项:选项, valueField:'名称', 拉贝尔菲尔德:“名字”, 搜索字段:[“名称”], 坚持:错, 创建:true }; const openBtn=document.querySelector'open'; const closeBtn=document.querySelector'close'; openBtn.addEventListener'click',functionevent{ 选择[0]。选择size.open; }; closeBtn.addEventListener'click',functionevent{ 选择[0]。选择size.close; }; 选择[0]。选择Size.addItem'option2'; 选择 打开 关 提交
本VC队太棒了。您对onItemAdd函数中的refreshItmes和refreshOptions方法调用的观察非常准确。正如我在上一篇评论中指出的,我添加了一个交互式变量,当我希望“静默”重置selectize列表中的项目时,将其设置为false,然后在完成重置时将interactive设置为true。然后我添加了一个if语句,该语句包含了itemAdd函数中的刷新调用和列表滚动,因此这些语句仅在interactive的值为true时执行


再次感谢

谢谢你的例子。我将其放在一个代码笔中,并正在添加我的自定义代码,以查看我的代码的哪一部分导致了问题。您是否知道我如何能够在不转储选项的情况下使用load方法选择选项列表中的项目?要选择的选项列表已经在浏览器客户端上,因此不需要ajax调用。您只是在首次显示选择时尝试默认选择某些选项吗?如果是,请参阅。这是代码笔演示url:当您打开页面时,列表中会填充演示数据,并显示一条警报,指示在您按下“确定”按钮后列表将打开。通过搜索“//============================================================================”,您可以向下滚动到使用演示数据初始化列表的代码。感谢您的帮助!抢手货itemAdd事件处理程序将delete item click处理程序添加到用户添加到列表的新项目中,并将新添加的项目滚动到视图中,这两个项目仅在列表变为交互式后才需要。因此,我可以在执行静默加载项时阻止刷新。再次感谢。