Динамически заполнить Bootstrap мультиселект - PullRequest
Новая
       22

Динамически заполнить Bootstrap мультиселект

0 голосов
/ 28 апреля 2020

Я пытаюсь динамически заполнить bootstrap элемент множественного выбора jQuery в зависимости от других опций выпадающего списка, но мой третий выпадающий список все еще пуст. Как я могу это исправить ? спасибо.

Вот мой код:

HTML

<select name="iselectunivers" id="iselectunivers" >
    <option disabled selected value> -- select an option -- </option>
</select></br>

<select name="iselectfamille" id="iselectfamille" >
    <option disabled selected value> -- select an option -- </option>
</select></br>

<select class="selectpicker" name="iselectlibellemarque" id="iselectlibellemarque" style="width: 210px;" data-live-search="true" data-actions-box="true" multiple></select></br>

Javascript

 $('#iselectunivers').bind('change', function() {
    $('#iselectfamille').empty(); // <<<<<< No more issue here
    $('#iselectcategorie').empty(); // <<<<<< No more issue here

    var value_univers = $(this).val();
    console.log("XXX"+value_univers)
    const famille_filtered = jsonproduits.filter(d => d.libelleunivers === value_univers);
    console.log(famille_filtered)

    let unique_famille = [...new Set(famille_filtered.map(item => item.libellefamille))];
    console.log(unique_famille);

    select_famille = document.getElementById( 'iselectfamille' );
    for(var i = 0; i < unique_famille.length; i++) {
        select_famille.add( new Option(unique_famille[i]));
    };


}).trigger('change');

$('#iselectfamille').bind('change', function() {
    $('#iselectcategorie').empty(); // <<<<<< No more issue here
    var value_famille = $(this).val();
    console.log("ZZZZ"+value_famille)
    const categorie_filtered = jsonproduits.filter(d => d.libellefamille === value_famille);
    console.log(categorie_filtered)

    let unique_categorie = [...new Set(categorie_filtered.map(item => item.libellecategorie))];
    console.log(unique_categorie);

    // select_categorie = document.getElementById( 'iselectcategorie' );
    // for(var i = 0; i < unique_categorie.length; i++) {
    //     select_categorie.add( new Option(unique_categorie[i]));
    // };

    var $select = $('<select/>', {
        'class':"selectpicker"
    });
    for (var i = 0; i < unique_categorie.length; i++) {
        $select.append('<option value=' + unique_categorie[i] + '>' + unique_categorie[i] + '</option>');
    }

    $select.appendTo('#iselectcategorie').selectpicker('refresh');


}).trigger('change');

(Этот код отлично, если мой третий выбор - простой выбор, но выбор выбора кажется очень специфичным c)

...