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

105

我正在尝试使用“选择的插件”更改select中的当前选定选项。

该文件介绍了更新列表以及在选择选项时触发事件，但是在外部更改当前选择的值方面没有任何作用（我可以看到）。

我制作了一个jsFiddle来演示代码和更改选择的尝试方法：

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

— ak
source

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

— 幸运

好的。我无法运行您的演示的原因是所选的库指向错误的URL。这是更新的jsfiddle

— 幸运

214

在文档的“动态选择更新”部分中：您需要在字段上触发“ chosen：updated”事件

$(document).ready(function() {

    $('select').chosen();

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

});

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

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

— 卢卡斯·韦尔珀
source

6

仅供参考：他们已更新为1.0，现在使用的chosen:updated是liszt:updated

— Henesnarfel 2013年

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

— Timo 2014年

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

— Dimitris Papageorgiou 2014年

9

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

— Andrew Newby 2014年

10

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

— machineaddict 2015年

41

我的答案来晚了，但我想补充一些以上所有答案中都没有的信息。

1）如果要在选择的选择中选择单个值。

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

2）如果您使用多个选择的选择，则可能需要一次设置多个值。

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

通过以下链接收集的信息：
1）选择文档
2）选择Github讨论

— 亚米尔
source

注意“ 22”，“ 25”等是值，而不是内部HTML，例如<option value =“ 25”> sometext </ option>

— Fadi Bakoura

2

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

这是如何设置选项的示例：

<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（包括howto附加选项）：https ://jsfiddle.net/59x3m6op/1/

— 托比·G。
source

1

要考虑选择还没有值的情况，请改为更新var selected = mySelect.val();为var selected = mySelect.val() || [];。

— ElliotSchmelliot

0

如果是多种选择类型，并且/或者如果要一一删除已选择的项目，则可以在下拉列表中直接使用以下项目：

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');
});

— 斯拉维萨·彼得科维奇
source