Comment vider un sélecteur avec l'utilisation de javascript? À des fins de test, j'ai deux sélecteurs, code 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 code de mon deuxième sélecteur:

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

Mon code javascript:

$(function() {

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

});

L'alerte fonctionne, donc $('#selectzvlntype').on('change', function() fonctionne, mais .empty(); ne fonctionne pas.

Toute aide est très appréciée

1
CostCare 8 août 2016 à 10:57

3 réponses

Meilleure réponse

Le composant Selectpicker ne s'actualise pas automatiquement lorsque vous manipulez l'élément DOM. Vous devez appeler la méthode $('#selectzkh').selectpicker("refresh") pour la faire fonctionner.

2
Noldor 8 août 2016 à 08:01

Vous devez garder à l'esprit qu'une fois que le plugin selectPicker est invoqué, il masque l'élément <select> d'origine et injecte son propre <div> (ainsi que d'autres éléments) pour rendre le sélecteur réel.

C'est pourquoi appeler empty() sur l'élément d'origine ne fonctionnera pas. Vous devez utiliser les propres méthodes du plugin pour ce faire:

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

Voir la documentation

0
haim770 8 août 2016 à 08:01

Essayez $ ("option # selectzvlntype"). Remove (); Ça devrait marcher

0
Nagashree Hs 8 août 2016 à 08:25