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|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|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|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|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|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|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|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|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|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|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|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|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|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|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|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')....

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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