CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
NekoLopez
NekoLopez

Reputation: 609

JQuery Chosen plugin - Return to "Select an option"

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.

Upvotes: 0

Views: 678

Answers (2)

Phani Kumar M
Phani Kumar M

Reputation: 4590

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>

Upvotes: 1

TKoL
TKoL

Reputation: 13912

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

Upvotes: 0

Related Questions