CostCare CostCare - 4 months ago 49
HTML Question

empty selectpicker javascript

How do I empty a selectpicker with use of javascript? For testing purposes I have two selectpickers,

html
code:

<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
code of my second selectpicker:

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


My
javascript
code:

$(function() {

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

});


The alert is working, so the
$('#selectzvlntype').on('change', function()
is working, but the
.empty();
is not..

Any help is much appreciated

Answer

Selectpicker component does not refresh itself automatically when you manipulate the DOM element. You need to call $('#selectzkh').selectpicker("refresh") method to make it work.