jQuery选择插件-返回“选择选项”

Question

I have this simple select where I apply Chosen plugin

<label class="radio-inline"><input type="radio" name="reset" value="reset">Reset</label>

<select id="listclient">
<option value=""></option>
<option value="Mark">Mark</option>
<option value="Jenny">Jenny</option>
<option value="Joy"></option>
</select>

And in JS:

$("#listclient").chosen({width:"100%",no_results_text: "No results",placeholder_text_single: "Select client"});

It works great but I want when I click radiobutton "reset" return to placerholder text single "Select client" by default.

I would like some help.

Answer 1

You can reset the select using:

$('#listclient').val('').trigger('chosen:updated');

I would advise to change the radio element to button instead.

 $(function () { $("#listclient").chosen({ width: "100%", no_results_text: "No results", placeholder_text_single: "Select client" }); $("[name='reset']").on("click", function () { $('#listclient').val('').trigger('chosen:updated'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" /> <label class="radio-inline"><input type="radio" name="reset" value="reset">Reset</label> <select id="listclient"> <option value=""></option> <option value="Mark">Mark</option> <option value="Jenny">Jenny</option> <option value="Joy"></option> </select> 

Answer 2

First of all, that probably shouldn't be a radio input at all, it should probably just be a button.

But more to the point, I would add a $().click handler for the reset button that does something like $('#listclient').val('')