使用 Chosen 插件更改选择中的选择

Posted 2023-03-11

【中文标题】使用 Chosen 插件更改选择中的选择

【英文标题】：Changing selection in a select with the Chosen plugin

【发布时间】：2012-02-17 07:17:56

【问题描述】：

我正在尝试使用 Chosen 插件更改当前选择的选项。

documentation 涵盖更新列表，并在选择选项时触发事件，但没有（我可以看到）从外部更改当前选择的值。

我已经创建了jsFiddle to demonstrate the code 以及我尝试更改选择的方法：

$('button').click(function() 
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
);

【问题讨论】：

我无法运行您提供的 jsfiddle 演示。你能更新一下吗？

好的。我无法运行您的演示的原因是选择的库指向了一个不正确的 url。这是更新后的jsfiddle

【参考方案1】：

来自docs 中的“动态更新选择”部分：您需要在该字段上触发 'chosen:updated' 事件

$(document).ready(function() 

    $('select').chosen();

    $('button').click(function() 
        $('select').val(2);
        $('select').trigger("chosen:updated");
    );

);

注意：1.0 之前的版本使用以下内容：

$('select').trigger("liszt:updated");

【讨论】：

仅供参考：他们已经更新到 1.0，现在使用 chosen:updated 而不是 liszt:updated

我在这里偶然发现，因为我试图找到一种方法来从多选选择的搜索结果列表中选择当前最匹配的选项（无论何时失去焦点）。这是a short fiddle关于我的探索。您不需要事件触发任何事件。也许，它对其他人也有用...... :)

尽管上面的代码有效，但这只会发生一次。我的意思是，如果我再次单击附加了所选插件的菜单，则不会采用 val() 中的值。为什么会发生这种情况

我知道这是一篇旧帖子 - 但更简单的更新方法只是在一个字符串中：$('select').val(2).trigger("chosen:updated");

@Lucas Welper：您还应该将$('select').val(2); 更改为$('select').val(2).change();，因为使用 jQuery 更改 select 的 selected 选项不会触发 change 事件，有些人可能需要它。跨度>

【参考方案2】：

我的答案迟到了，但我想补充一些上述所有答案中遗漏的信息。

1) 如果你想在选择的选择中选择单个值。

$('#select-id').val("22").trigger('chosen:updated');

2) 如果您使用多选选择，那么您可能需要一次设置多个值。

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

从以下链接收集的信息： 1) Chosen Docs 2)Chosen Github Discussion

【讨论】：

注意 "22","25" 等是值，而不是内部 html，例如 sometext

【参考方案3】：

有时您必须删除当前选项才能操作选定的选项。

这里是一个如何设置选项的例子：

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) 
    param = param || ;
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");


function selectChosenOptions($select, values) 
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');

</script>

JSFiddle（包括如何附加选项）： https://jsfiddle.net/59x3m6op/1/

【讨论】：

为了解决 select 还没有值的情况，请将 var selected = mySelect.val(); 更新为 var selected = mySelect.val() || [];。

【参考方案4】：

如果是 multiple 类型的选择和/或如果您想一一删除已选择的项目，直接在下拉列表项目中，您可以使用以下内容：

jQuery("body").on("click", ".result-selected", function() 
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) 
        arrayCurrent.splice(index, 1);
    
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
);