blocks|key|527064|text|尝试使用最新选择的JS重新加载更新的Select框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|527065|$("#form_field").trigger("chosen:updated");|code-block|syntax|javascript|527066|http://harvesthq.github.io/chosen/|offset|length|527067|它将更新选择的下拉列表与新加载的Ajax选择框。|527068|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@$I|W|J|X|1|Y]]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]]]

Try this to reload updated Select box with Latest Chosen JS.

<pre><code>$("#form_field").trigger("chosen:updated");
</code></pre>

<a href="http://harvesthq.github.io/chosen/">http://harvesthq.github.io/chosen/</a>

It will Updated chosen drop-down with new loaded select box with Ajax.

blocks|key|526955|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526956|$("#autoship_option+option[selected]").removeAttr("selected");|code-block|syntax|javascript|526957|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>$("#autoship_option option[selected]").removeAttr("selected");
</code></pre>

blocks|key|310530|text|如果您使用的是chosen，一个jquery插件，那么要刷新或清除下拉菜单的内容，请使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|310531|$('#dropdown_id').empty().append($('<+option>'))

dropdown_id.chosen().trigger("chosen:updated")|code-block|syntax|javascript|310532|chosen:updated事件将根据更新的内容对自身进行re-build。|310533|entityMap^0|7|6|0|0|0|E|T|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

If you are using <code>chosen</code>, a jquery plugin, then to refresh or clear the content of the dropdown use:

<pre><code>$('#dropdown_id').empty().append($('&lt; option&gt;'))

dropdown_id.chosen().trigger("chosen:updated")
</code></pre>

<code>chosen:updated</code> event will <code>re-build</code> itself based on the updated content.

blocks|key|527112|text|我使用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|527113|$('idSelect').val([]);|offset|length|style|CODE|527114|在IE、Safari和Firefox上测试|527115|entityMap^0|0|0|M|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

I use this:

<code>$('idSelect').val([]);</code>

tested on IE, Safari &amp; Firefox

blocks|key|310065|text|$('#autoship_option').val('').trigger('liszt:updated');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|310066|并将默认选项值设置为''。|unstyled|offset|length|style|CODE|310067|它必须与选择的更新jQuery一起使用，可通过以下链接获得：https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js。|310068|最后，我花了整整一天的时间才发现jquery.min与chosen.jquery.min是不同的|310069|entityMap|0|LINK|mutability|MUTABLE|url|https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js^0|0|A|2|0|U|22|0|0|G|A|R|H|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|X|8|@$G|Y|H|Z|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@$G|11|H|12|1|13]]|A|$]]|$1|M|3|N|5|F|7|14|8|@$G|15|H|16|I|J]|$G|17|H|18|I|J]]|9|@]|A|$]]|$1|O|3|-4|5|F|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<pre><code>$('#autoship_option').val('').trigger('liszt:updated');
</code></pre>

and set the default option value to <code>''</code>.

It has to be used with chosen updated jQuery available at this link: <a href="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js" rel="nofollow">https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js</a>.

I spent one full day to find out at the end that <code>jquery.min</code> is different from <code>chosen.jquery.min</code>

blocks|key|310235|text|这比find更有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310236|$('select').children('option').first().prop('selected',+true)
$('select').trigger("chosen:updated");|code-block|syntax|javascript|310237|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is more effective than find.

<pre><code>$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
</code></pre>

blocks|key|527398|text|var+config+=+{
++++++'.chosen-select'+++++++++++:+{},
++++++'.chosen-select-deselect'++:+{allow_single_deselect:true},
++++++'.chosen-select-no-single'+:+{disable_search_threshold:10},
++++++'.chosen-select-no-results':+{no_results_text:'Oops,+nothing+found!'},
++++++'.chosen-select-width'+++++:+{width:"95%25"}
++++}
++++for+(var+selector+in+config)+{
++++++$(selector).chosen(config[selector]);
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|527399|使用上面的配置并应用class='chosen-select-deselect'手动取消选择并将值设置为空|unstyled|offset|length|style|CODE|527400|或者，如果您想在所有组合框中取消选择选项，则应用如下配置|527401|var+config+=+{
++'.chosen-select'+++++++++++:+{allow_single_deselect:true},//Remove+if+you+do+not+need+X+button+in+combo
++'.chosen-select-deselect'++:+{allow_single_deselect:true},
++'.chosen-select-no-single'+:+{disable_search_threshold:10},
++'.chosen-select-no-results':+{no_results_text:'Oops,+nothing+found!'},
++'.chosen-select-width'+++++:+{width:"95%25"}
}
for+(var+selector+in+config)+{
++$(selector).chosen(config[selector]);
}|527402|entityMap^0|0|A|U|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@$G|S|H|T|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$B|C]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>var config = {
 '.chosen-select' : {},
 '.chosen-select-deselect' : {allow_single_deselect:true},
 '.chosen-select-no-single' : {disable_search_threshold:10},
 '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
 '.chosen-select-width' : {width:"95%"}
 }
 for (var selector in config) {
 $(selector).chosen(config[selector]);
 }
</code></pre>

Use above config and apply <code>class='chosen-select-deselect'</code> for manually deselect and set the value empty

or if you want deselect option in all combo then apply config like below 

<pre><code>var config = {
 '.chosen-select' : {allow_single_deselect:true},//Remove if you do not need X button in combo
 '.chosen-select-deselect' : {allow_single_deselect:true},
 '.chosen-select-no-single' : {disable_search_threshold:10},
 '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
 '.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
 $(selector).chosen(config[selector]);
}
</code></pre>

blocks|key|309999|text|jQuery("#autoship_option+option:first").attr('selected',+true);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|310000|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>jQuery("#autoship_option option:first").attr('selected', true);
</code></pre>

blocks|key|310317|text|我不确定这是否适用于旧版本的select，但现在在当前版本(v1.4.1)中，他们有一个选项，它会在名称selected.Use+'x‘旁边添加一个'x’图标，以清除'select‘字段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310318|PS:确保你按照chosen.css在正确的位置设置了‘sure+sprite.png’，这样图标就是可见的。|310319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I am not sure if this applies to the older version of chosen,but now in the current version(v1.4.1) they have a option <code>$('#autoship_option').chosen({ allow_single_deselect:true });</code> This will add a 'x' icon next to the name selected.Use the 'x' to clear the 'select' feild.

PS:make sure you have 'chosen-sprite.png' in the right place as per the chosen.css so that the icons are visible.

blocks|key|527441|text|在Chrome版本49中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|527442|你总是需要这段代码|527443|$("select+option:first").prop('selected',+true)|offset|length|style|CODE|527444|entityMap^0|0|0|0|1B|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@$F|O|G|P|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

In Chrome version 49

you need always this code

<code>$("select option:first").prop('selected', true)</code>

blocks|key|526927|text|我认为你必须给select赋一个新值，所以如果你想清除你的选择，你可能想把它赋给value+=+"“的那个。我认为您可以通过将值赋给空字符串来获得它，因此.val('')|type|unstyled|depth|inlineStyleRanges|entityRanges|data|526928|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

i think you have to assign a new value to the select, so if you want to clear your selection you probably want to assign it to the one that has value = "". I think that you will be able to get it by assigning the value to empty string so .val('')

blocks|key|527141|text|您可以尝试此选项以重置(空)下拉菜单|type|unstyled|depth|inlineStyleRanges|entityRanges|data|527142|+$("#autoship_option").click(function(){
++++++++++++$('#autoship_option').empty();+//remove+all+child+nodes
++++++++++++var+newOption+=+$('<option+value=""></option>');
++++++++++++$('#autoship_option').append(newOption);
++++++++++++$('#autoship_option').trigger("chosen:updated");
++++++++});|code-block|syntax|javascript|527143|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can try this to reset (empty) drop down 

<pre><code> $("#autoship_option").click(function(){
 $('#autoship_option').empty(); //remove all child nodes
 var newOption = $('&lt;option value=""&gt;&lt;/option&gt;');
 $('#autoship_option').append(newOption);
 $('#autoship_option').trigger("chosen:updated");
 });
</code></pre>

blocks|key|527194|text|新选择的库不使用liszt。我使用了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|527195|document.getElementById('autoship_option').selectedIndex+=+0;
$("#autoship_option").trigger("chosen:updated");|code-block|syntax|javascript|527196|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The new Chosen libraries don't use the liszt. I used the following:

<pre><code>document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
</code></pre>

blocks|key|310352|text|如果您需要选择第一个选项，而不考虑其值(有时第一个选项的值不为空)，请使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310353|$('#autoship_option').val($('#autoship_option+option:first-child').val()).trigger("liszt:updated");|code-block|syntax|javascript|310354|它将获取第一个选项的值，并将其设置为选中，然后在选中时触发更新。因此它就像重置到列表上第一个选项一样工作。|310355|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you need to have first option selected by no matter of its value (sometimes first option value is not empty) use this:

<pre><code>$('#autoship_option').val($('#autoship_option option:first-child').val()).trigger("liszt:updated");
</code></pre>

It will get value of first option and set it as selected then trigger update on Chosen. So it work like reset to first option on list.

blocks|key|310407|text|确切地说，我有同样的要求。但是用jquery简单地设置空字符串来重置下拉列表是行不通的。您还应该触发更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310408|Html:
<select+class='chosen-control'>
<option>1<option>
<option>2<option>
<option>3<option>
</select>

Jquery:
$('.chosen-control').val('').trigger('liszt:updated');|code-block|syntax|javascript|310409|有时，根据所选控件的版本，您可能需要使用以下语法。|310410|$('.chosen-control').val('').trigger("chosen:updated");|310411|参考：How+to+reset+Jquery+chosen+select+option|offset|length|310412|entityMap|0|LINK|mutability|MUTABLE|url|https://wikigurus.com/Article/Show/32498/How-do-I-reset-a-jquery-chosen-select-option-with-jQuery^0|0|0|0|0|3|14|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Exactly i had the same requirement. But resetting the drop down list by setting simply empty string with jquery won't work. You should also trigger update. 

<pre><code>Html:
&lt;select class='chosen-control'&gt;
&lt;option&gt;1&lt;option&gt;
&lt;option&gt;2&lt;option&gt;
&lt;option&gt;3&lt;option&gt;
&lt;/select&gt;

Jquery:
$('.chosen-control').val('').trigger('liszt:updated');
</code></pre>

sometimes based on the version of chosen control you are using, you may need to use below syntax.

<pre><code>$('.chosen-control').val('').trigger("chosen:updated");
</code></pre>

Reference: <a href="https://wikigurus.com/Article/Show/32498/How-do-I-reset-a-jquery-chosen-select-option-with-jQuery" rel="nofollow">How to reset Jquery chosen select option</a>

blocks|key|310489|text|jQuery('.chosen-processed').find('.search-choice-close').click();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|310490|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>jQuery('.chosen-processed').find('.search-choice-close').click();
</code></pre>

blocks|key|310501|text|简单的添加触发器更改如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310502|$('#selectId').val('').trigger('change');|code-block|syntax|javascript|310503|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simple add trigger change like this: 

<pre><code>$('#selectId').val('').trigger('change');
</code></pre>

blocks|key|310559|text|从上面的解决方案中，没有任何解决方案对我有效。这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310560|$('#client_filter').html('+');+//this+worked|offset|length|style|CODE|310561|为什么？:)|310562|$.ajax({+
++++++++type:+'POST',+
++++++++url:+xyz_ajax,
++++++++dataType:+"json",
++++++++data+:+{+csrfmiddlewaretoken:+csrftoken,
++++++++++++++++instancess+:+selected_instances+},+
++++++++success:+function(response)+{+
++++++++++++//clear+the+client+DD+++++++
++++++++++++$('#client_filter').val('').trigger('change')+;+//not+working
++++++++++++$('#client_filter').val('').trigger('chosen:updated')+;+//not+working
++++++++++++$('#client_filter').val('').trigger('liszt:updated')+;+//not+working
+++++++++++++$('#client_filter').html('+');+//this+worked
+++++++++++++jQuery.each(response,+function(index,+item)+{
++++++++++++++++++$('#client_filter').append('<option+value="'%2Bitem.id%2B'">'+%2B+item.text+%2B+'</option>');
++++++++++++++++});+++++++++++++++++
+++++++++++$('#client_filter').trigger("chosen:updated");
++++++++}
++++++});
+++++}+|code-block|syntax|javascript|310563|entityMap^0|0|0|18|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

from above solutions, Nothing worked for me. This worked: 

<code>$('#client_filter').html(' '); //this worked</code>

Why is that? :)

<pre><code>$.ajax({ 
 type: 'POST', 
 url: xyz_ajax,
 dataType: "json",
 data : { csrfmiddlewaretoken: csrftoken,
 instancess : selected_instances }, 
 success: function(response) { 
 //clear the client DD 
 $('#client_filter').val('').trigger('change') ; //not working
 $('#client_filter').val('').trigger('chosen:updated') ; //not working
 $('#client_filter').val('').trigger('liszt:updated') ; //not working
 $('#client_filter').html(' '); //this worked
 jQuery.each(response, function(index, item) {
 $('#client_filter').append('&lt;option value="'+item.id+'"&gt;' + item.text + '&lt;/option&gt;');
 }); 
 $('#client_filter').trigger("chosen:updated");
 }
 });
 } 
</code></pre>

I have tried numerous things and nothing seems to be working.

I am using jQuery and Chosen plugin.

Methods I have tried:

<pre><code>var select = jQuery('#autoship_option');

select.val(jQuery('options:first', select).val());

jQuery('#autoship_option').val('');

jQuery('#autoship_option').text('');

jQuery('#autoship_option').empty('');

jQuery("#autoship_option option[value='']").attr('selected', true);
</code></pre>

It always shows the Active Autoship option once it has been selected. I can't seem to get it to clear the selection.

Here is the select box:

<pre><code>&lt;select id="autoship_option" data-placeholder="Choose Option..." 
style="width: 175px;" class="chzn-select"&gt;
 &lt;option value=""&gt;&lt;/option&gt;
 &lt;option value="active"&gt;Active Autoship&lt;/option&gt;
&lt;/select&gt;
</code></pre>

Anyone familiar with Chosen and being able to clear a select box with one option? (It will have more options in the future.

How do I reset a jquery-chosen select option with jQuery?

jQuery

我尝试了许多方法，但似乎都不起作用。我使用的是jQuery和精选插件。我尝试过的方法：var select = jQuery('#autoship_option');select.val(jQuery('options:first', select).val());jQuery('#autoship_option').val('');jQuery('#autoship_option').text(

问如何用jQuery重置jQuery选择的选择选项？
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用jQuery重置jQuery选择的选择选项？EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用jQuery重置jQuery选择的选择选项？
EN