Question

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

 <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 option”）。remove（）;它应该工作

空的selectpicker javascript

3 个答案: