Question

我的项目中有一个场景，使用selected（）选择用所选值填充字段。另一种情况是重置我已经实现的选择字段，如下所示。

$('.chosen-select').val('').trigger('liszt:updated');

但问题是它清除了字段值，但是一旦清除了选定的值，占位符就会消失。我需要占位符在没有选择之前可见。

我尝试了很多但仍然是同样的问题。

示例代码 - ＆gt; chosen() select example

示例HTML

<select id="second" data-placeholder="Choose a Fruit..." class="chosen-select" multiple style="width:350px;" tabindex="4">
      <option value=""></option> 
      <option value="Banana">Banana</option> 
      <option value="Pineapple">Pineapple</option> 
      <option value="Grapes">Grapes</option> 
      <option value="Apple">Apple</option> 
      <option value="Orange">Orange</option> 
      <option value="Strawberry">Strawberry</option> 
    </select>
<br /><br />
<p id="status"></p>
<button class="btn">Reset</button>

SAMPLE JQUERY

    $('button').click(function(){
        $(".chosen-select").val('').trigger("chosen:updated");
    });


$(".chosen-select").chosen().on("change", function(event, params) {

  if (params.selected) {

      $("#status").text('The option: ' + params.selected + ' was selected.');
  }
  if (params.deselected) {
     $("#status").text('The option: ' + params.deselected + ' was deselected.');
  }
});

Answer 1

只需更新您的代码。

$('button').click(function(){
        $(".chosen-select").val('Choose a Fruit...').trigger("chosen:updated");
});

因为选择框的逻辑设置值是＆＃39;＆＃39;。，这就是您遇到此问题的原因。

Answer 2

您可以重新创建所选的：

$('button').click(function(){
	var select = $(".chosen-select");
        select.chosen("destroy");
        select.prop("selectedIndex", -1); 
        select.chosen();

        // clear selected text after reset
        $("#status").text('');
});

$(".chosen-select").chosen().on("change", function(event, params) {

  if (params.selected) {
      $("#status").text('The option: ' + params.selected + ' was selected.');
  }
  if (params.deselected) {
     $("#status").text('The option: ' + params.deselected + ' was deselected.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<select id="second" data-placeholder="Choose a Fruit..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option> 
    <option value="Banana">Banana</option> 
    <option value="Pineapple">Pineapple</option> 
    <option value="Grapes">Grapes</option> 
    <option value="Apple">Apple</option> 
    <option value="Orange">Orange</option> 
    <option value="Strawberry">Strawberry</option> 
</select>
<br /><br />
<p id="status"></p>
<button class="btn">Reset</button>

Answer 3

您可以使用jQuery方法链接来完成此操作，例如 - https://jsfiddle.net/iamravikk/Legxf0vk/7/

在触发前调用.val（）。

$(".chosen-select").val('Choose a Fruit...').trigger("chosen:updated");

在selected（）选择上应用的重置也会重置占位符

3 个答案: