Javascript 重置应用于选定对象（）选择也重置占位符

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

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

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

我尝试了很多东西，但仍然是同一个问题

示例代码->

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

只需更新你的代码

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

---

因为选择框的逻辑设置值为“”。这就是您面临此问题的原因。

您可以重新创建所选的：

$（“按钮”）。单击（函数（）{
var select=$（“.selected select”）；
选择。选择（“销毁”）；
select.prop（“selectedIndex”，-1）；
select.selected（）；
//重置后清除所选文本
$（“#状态”）。文本（“”）；
});
$（.selected-select”）.selected（）.on（“更改”，函数（事件，参数）{
如果（已选择参数）{
$（“#状态”）.text（'选择了选项：'+params.selected+'）；
}
如果（取消选择参数）{
$（“#状态”）.text（'选项：'+params.deselected+'已取消选择'）；
}
});

香蕉
菠萝
葡萄
苹果
橙色
草莓的




重置
您可以使用jQuery方法链接来执行此操作，如下所示-

在触发器之前调用.val（）

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

您是否使用angular？无论您在val（）中添加了什么文本，前面的占位符都会返回到以前的位置。当前我输入val（'默认值'）
$(".chosen-select").val('Choose a Fruit...').trigger("chosen:updated");