重置應用在選擇（）選擇也重置佔位符

Question

我有我的項目中使用選擇（）選擇填充字段與選定的值的情況。另一種情況是重置我已經實現的選擇字段，如下所示。

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

但問題是它清除字段值，但一旦選定的值被清除，佔位符也會消失。我需要佔位符像以前一樣可見，沒有選擇。

我已經嘗試了很多東西，但仍然是相同的問題。

示例代碼 - >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> 

樣品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(){ 
 
\t 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 2

只要更新你的代碼。

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

因爲它在邏輯上對於選擇框的設置值是''。這就是爲什麼你面臨這個問題。

Answer 3

爲此，您可以使用jQuery方法鏈接，就像之前觸發這個 - https://jsfiddle.net/iamravikk/Legxf0vk/7/

調用.VAL（）。

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