jQuery Chosen 插件动态添加选项

Posted 2023-05-07

【中文标题】jQuery Chosen 插件动态添加选项

【英文标题】：jQuery Chosen plugin add options dynamically

【发布时间】：2012-07-06 07:44:24

【问题描述】：

我做了一个 jQuery 像这样选择下拉列表：

$('.blah').chosen();

我找不到如何添加选项，例如：

$('.blah').chosen('add', name, value);

【参考方案1】：

首先，您需要将 <option>s 添加到 Chosen 绑定的 <select>。例如：

$('.blah').append('<option value="foo">Bar</option>');

然后，需要触发chosen:updated事件：

$('.blah').trigger("chosen:updated");

更多信息可以在here找到（尽管您需要向下滚动到Change / Update Events）。

---

2013 年 8 月 7 日更新

正如 Tony 在 cmets 中提到的那样，自 1.0 版（2013 年 7 月）以来，事件名称已更改为 chosen:updated。更新的文档可以在here找到。

【讨论】：

@Mike 很抱歉 ;) 它总是发生在我身上！

从 1.0 版开始，触发器现在是“选择：更新”。见harvesthq.github.io/chosen/#change-update-events

我建议您通过替换 $('.blah').trigger("liszt:updated"); 来更新您的答案用 $('.blah').trigger("chosen:updated"); - 因为像我这样的人只阅读代码

@lonelyloner 谢谢，我已经更新了答案中的代码示例

【参考方案2】：

最新选择的版本将事件名称更改为“chosen:updated”

所以你的代码会是这样的：

$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");

【讨论】：

这对我有用。但是下面的代码不起作用($('.blah').trigger("liszt:updated");)。

这将替换现有标签。 @TotPeRo 的 amswer 为我工作

【参考方案3】：

使用 Ajax 将元素保存到服务器后，您可以调用此函数将元素添加到选择中：

function appendToChosen(id,value)
    $('.blah')
        .append($('<option></option>')
        .val(id)
        .attr('selected', 'selected')
        .html(value)).trigger('liszt:updated');

Ajax 调用：

$.ajax(
    type: 'POST',
    url: 'savepage.php',
    data: $('#modal-form form').serialize(),

    success: function(data, status) 
        appendToChosen(data[0],data[1]);
    ,
    error: function (response) 
        alert(response);
    
    ).always(function(data, status) 
        //hide loading
    );

【参考方案4】：

试试这个..

         $.ajax(
            url: "@Url.Action("Actionname", "Controller")",
            data:  id: id ,
                dataType: "json",
                type: "POST",
                success: function (data) 
                $("#id_chzn .chzn-results").children().remove();
                var opts = $('#id')[0].options;
                    $.map(data, function (item) 
                        var text = item.text;
                        for (var i = 0; i < opts.length ; i++) 
                            var option = opts[i];
                            var comparetext = option.innerText;
                            var val = 0;
                            if(text == comparetext)
                            
                                val = option.index;
                                $('#id_chzn .chzn-results').append("<li id='id_chzn" + val + "' class='active-result' style>" + item.text + "</li>");
                            
                        
                    );
                  
                );

【参考方案5】：

我使用下面的代码来动态更新选择的下拉选项并且它有效：

var myDropDownOptionHtml ='<option value="0">--Customer--</option>'; 

$('#myDropdownId').html(myDropDownOptionHtml );
setTimeout(function() 
    $("#myDropdownId").trigger("liszt:updated");
,100);

仅供参考，我使用的是 jQuery Chosen 版本 0.13.0

编码愉快！