空selectpicker javascript

Question

如何使用javascript清空selectpicker？出于测试目的，我有两个selectpickers，html代码：我的第二个selectpicker的

<select id="selectzvlntype" class="selectpicker show-tick" data-size="5" data-live-search="true" data-width="100%"> 
    <option value="0" selected disabled>Kies type zorgverlener</option> 
    <?php 
     $q = "SELECT id_zvln_type, zvln_type 
      FROM tbl_zvln_types 
      ORDER BY zvln_type ASC"; 
     $r = mysqli_query($dbc, $q); 
     while($zvln_types = mysqli_fetch_assoc($r)) { ?> 
      <option value="<?php echo $zvln_types['id_zvln_type']; ?>"><?php echo $zvln_types['zvln_type']; ?></option> 
    <?php } ?> 
</select> 

html代码：

<select class="selectpicker show-tick" data-size="5" data-live-search="true" data-width="100%" id="selectzkh" onchange="ga('send', 'event', 'Select Choice', 'Select ZKH Changed', this.options[this.selectedIndex].value]);"> 
    <option value="0" selected disabled>Kies uw zorgverlener</option> 
    <?php 
     $q = "SELECT id_zvln, zvln 
      FROM tbl_zvln 
      ORDER BY zvln ASC"; 
     $r = mysqli_query($dbc, $q); 
     while($zvln = mysqli_fetch_assoc($r)) { ?> 
      <option value="<?php echo $zvln['id_zvln']; ?>"><?php echo $zvln['zvln']; ?></option> 
    <?php } ?> 
</select> 

我javascript代码：

$(function() { 

    $('#selectzvlntype').on('change', function(){ 
    //var selected = $(this).find("option:selected").val(); 
    //alert(selected); 
    $('#selectzkh').empty(); 
    }); 

}); 

警报工作，所以$('#selectzvlntype').on('change', function()正在工作，但.empty();不是..

非常感谢任何帮助

Answer 1

当您操纵DOM元素时，Selectpicker组件不会自动刷新自身。您需要拨打$('#selectzkh').selectpicker("refresh")方法使其工作。

Answer 2

您必须记住，一旦调用selectPicker插件，它将隐藏原始的<select>元素并注入其自己的<div>（以及更多元素）以呈现实际的选取器。

这就是为什么在原始元素上调用empty()不起作用。您需要使用插件的自己的方法来做到这一点：

$('#selectzkh').selectpicker('destroy'); 

见Documentation

Answer 3

尝试$（ “＃selectzvlntype选项”），删除（）。它应该工作