JQuery 选择的插件 - Return 到 "Select an option"

Question

我有这个简单的 select 我在其中应用了 Chosen 插件

<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>

在 JS 中：

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

它很好用，但我希望当我单击单选按钮 "reset" return 时默认为占位符文本单个 "Select client"。

我需要一些帮助。

Answer 1

首先，那可能根本不应该是 radio 输入，它应该只是一个按钮。

但更重要的是，我会为重置按钮添加一个 $().click 处理程序，它可以执行类似 $('#listclient').val('')

的操作

Answer 2

您可以使用以下方法重置 select：

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

我建议将单选元素更改为按钮。

$(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>

JQuery 选择的插件 - Return 到 "Select an option"

JQuery Chosen plugin - Return to "Select an option"

javascript

jquery

jquery-chosen