选择更新不工作答案

【问题标题】：Chosen updated not working选择更新不工作
【发布时间】：2014-01-19 16:50:15
【问题描述】：

我有一个选择的下拉菜单。我更改了选项内容并调用触发器选择：更新但选择不重建下拉菜单。这是我的更新

<select name="shortcode" style="width: 150px; display: none;" class="chosen_select chzn-done" id="select_shortcode">
   <option value=""></option> 
   <option value="7183">7183</option>
   <option value="7983">7983</option>
</select>

这是选择的下拉菜单（应该重建并删除最后两个<li>）

<ul class="chzn-results">
   <li id="select_shortcode_chzn_o_1" class="active-result" style="">7183</li>
   <li id="select_shortcode_chzn_o_2" class="active-result" style="">7983</li>
   <li id="select_shortcode_chzn_o_3" class="active-result" style="">8208</li>
   <li id="select_shortcode_chzn_o_4" class="active-result" style="">8308</li>
</ul>

这是我的 jQuery 代码：

$('#select_shortcode_mask').change(function(){
    var shortcode_mask = $('#select_shortcode_mask').val();
    $('#select_shortcode').empty();
    var shortcode = {"7X83":["7183","7983"],"8x08":["8208","8308"]};
    $('#select_shortcode').append("<option value=''></option>");
    if(jQuery.isArray(shortcode[shortcode_mask])){
            $.each( shortcode[shortcode_mask], function( subkey, subvalue ) {
                $('#select_shortcode').append("<option value='"+subvalue+"'>"+subvalue+"</option>");
            })
    } else {
        var full_shortcode = ["7183","7983","8208","8308"];
        if(jQuery.isArray(full_shortcode)){
            $.each(full_shortcode, function( subkey, subvalue ) {
                $('#select_shortcode').append("<option value='"+subvalue+"'>"+subvalue+"</option>");
            })
        }
    }
    $("#select_shortcode").trigger("chosen:updated");
});

已解决：我使用的是旧版本，所以它应该：

$("#select_shortcode").trigger("liszt:updated");

所以转储^^

【问题讨论】：

好的，你的选择没有更新，但是原来的选择更新了吗？
是的，我的原始选择已更新。感觉触发器不运行
您是否在更改事件期间检查控制台中的错误？
是的，我的控制台没有错误，完全清楚。每次事件发生时我的原始选择都会更改，但感觉触发器不运行。是钻机吗
我的错。是旧版本。所以转储@@

标签： jquery jquery-chosen

【解决方案1】：

我经常使用选择的插件，当然我不止一次遇到这个问题。

一般用.trigger("chosen:updated")就可以解决。但是就在一分钟前，这个方法不再起作用了，我感到很困惑，因为我在2个js文件中使用了相同的函数，比如说a.js和b.js，它在a.js中有效，但是不适用于b.js。我不知道为什么......我几乎失去了理智！！！

所以，我再次检查了api。我找到了.chosen("destroy")，启发了我！

我认为这是终极解决方案：摧毁它并重建它。

$('.chosen').chosen("destroy").chosen();

我是不是太吵了？ :p

【讨论】：

是的，这对我也有效，我尝试了 .trigger("chosen:updated") 和 .trigger("liszt:updated");似乎没有一个可以解决。 .chosen("摧毁").chosen();这有效
哇！这是唯一对我有用的东西。我还观察到，如果选择标签是静态的，并且只有动态添加选项 $("#select_shortcode").trigger("chosen:updated");工作正常，但是如果整个选择是动态构造的，只有选项 $('.chosen').chosen("destroy").chosen();作品。你知道为什么会这样吗？

【解决方案2】：

您的更改函数调用元素“#select_shortcode_mask”的更改。您的选择列表具有 id: "#select_shortcode"

【讨论】：

【解决方案3】：

我的方式是这样的......

$timeout(function() {
  $('#CampSrchId').trigger('chosen:updated');
}, 1000);

或

window.setInterval(function() {
  $('#CampSrchId').trigger('chosen:updated');
}, 1000);

【讨论】：

【解决方案4】：

我用过

$("select").chosen({ width: "100%" });//chosen hack

与使用 .trigger("chosen:updated"); 时一样，这似乎无法解决问题。它看起来很老套，但效果很好。

【讨论】：

就我而言，我必须在选择控件上明确设置宽度。感谢您的提示！

【解决方案5】：

代码：

$('#test')
  .val(1)
  .trigger('liszt:update')
  .removeClass('chzn-done');

$('#test_chzn').remove();


$("#test").chosen({
  width: "220px",
  no_results_text: "test"
});

【讨论】：

试着加强你的反应

【解决方案6】：

在我的情况下，这是因为 jQuery 的双重包含（一次在头部，一次在页脚）...... 我删除了页脚中的那个，.trigger('chosen:updated'); 就像一个魅力！

【讨论】：

【解决方案7】：

$('.select-chosen').chosen({width: "100%"});

【讨论】：