如何用JavaScript重置CHtml::dropDownList生成的chosen下拉框为默认值

问题原因 #

你使用的下拉框是基于Chosen jQuery插件实现的，之前的写法存在两处问题：

1. jQuery对象没有select属性，直接赋值elements.select = 'Select from contacts'是无效写法，无法修改下拉框选中值
2. 直接修改原生select的选中值、或是调用表单reset()方法，都只会修改原生表单元素的状态，不会同步更新Chosen插件动态渲染的展示内容，所以页面上看到的选中值不会变化。

解决代码 #

替换你的关闭弹窗事件逻辑即可：

$( document ).on( "click", ".close-modal", function() {     
    var contactList = $('.contact_list');
    // 重置原生下拉框选中值为第一个选项（默认生成的第一个选项value为空）
    contactList.val('');
    // 也可以用索引方式选中第一个选项，适配value不为空的场景：
    // contactList.prop('selectedIndex', 0);
    // 触发Chosen更新事件，同步渲染页面展示内容
    contactList.trigger('chosen:updated');

    var id=$(this).data("id");
    $(id).modal('hide');
});

内容的提问来源于stack exchange，提问作者Даяна Димитрова