How to select an option of a slim select with jquery

I have some concatenated selects that work fine. By the way, I would like to convert those selects into slim selects but I found some difficulties in doing that. For example, I have a select with ID level_incarico. When I select an option of level_incarico greater than zero other selects should appear. After that, when I change an option of a concatenated select for example in select_nazione, the option change correctly. But when I select another time the option zero in level_incarico and the I select another time an option greater than zero in level_incarico appears another time the select select_nazione with the option already selected previously.

This is my javascript code:

$("#level_incarico").change(function(){
    var option_selected = $('option:selected', this).attr('value');
    document.getElementById('level_incarico_selected').value = option_selected;

    if (option_selected > 0) {
        $('.nazione').css('display','block');
        $('.regione').css('display','none');
        $('.provincie').css('display','none');
        $('.comune').css('display','none');
        $('.altro_nazione').css('display','none');
        $("#select_regione").val(0);
        $("#select_provincia").val(0);
        $("#select_comune").val(0);
        $("#select_nazione").val(0);
        $("#altro_input_nazioni").val("");
    } else {
        $('.nazione').css('display','none');
        $('.regione').css('display','none');
        $('.provincie').css('display','none');
        $('.comune').css('display','none');
        $('.altro_nazione').css('display','none');
        $("#select_nazione").val(0); //here
        $("#select_regione").val(0);
        $("#select_provincia").val(0);
        $("#select_comune").val(0);
        $("#altro_input_nazioni").val("");
    }
});

This is how I create the selects:

new SlimSelect({
    select: '#select_nazione'
})

new SlimSelect({
    select: '#level_incarico'
})

In other words, the reset of the selected options $("#select_nazione").val(0); does not work correctly. It works with normal selects, but not with slim select.

Here how I fill in level_incarico:

        echo "<select id='level_incarico' name='level_incarico'>";
        echo "<option></option>";
        echo "<option value='0' " . (($ra_level == 0 && $id > 0)  ? 'selected' : '') . " >Mondiale</option>";
        echo "<option value='1' " . (($ra_level == 1 && $id > 0)  ? 'selected' : '') . " >Nazionale</option>";
        echo "<option value='2' " . (($ra_level == 2 && $id > 0)  ? 'selected' : '') . " >Regionale</option>";
        echo "<option value='3' " . (($ra_level == 3 && $id > 0)  ? 'selected' : '') . " >Provinciale</option>";
        echo "<option value='4' " . (($ra_level == 4 && $id > 0)  ? 'selected' : '') . " >Comunale</option>";
        echo "</select>";

Here how I fill in select_nazione:

    echo "<select id='select_nazione' name='select_nazione' required>";

    echo "<option value='0'>Seleziona...</option>";
    
        while($row = $result->fetch_assoc()) 
            {
                $nazione_id_val=intval($row['country_id']);
                $nazione_nome_val=$row['country_name'];
                
                if($ra_level > 0) {
                    if ($nazione_id_val == $id_nazione) 
                        {
                            $selected = "selected" ;
                        } else {
                            $selected = "" ;
                        }   
                    
                }
                echo"<option value='$nazione_id_val' $selected>$nazione_nome_val</option>";
            }
    echo "</select>";

Can help?

Answer

Why do you have an else for the values that are all 0
Why do you have display none in both branches?

Would this help you? I got the code from the manual

const $slimNazione  = new SlimSelect({
   select: '#select_nazione',
   onChange: (info) => {
    console.log(info.value)
  }
})

const $slimIncario = new SlimSelect({
  select: '#level_incarico',
  onChange: (info) => {
    console.log(info.value)
    const val = +info.value;
    $('.nazione').toggle(val > 0);
    $('.regione').hide();
    $('.provincie').hide();
    $('.comune').hide();
    $('.altro_nazione').hide();
    $slimNazione.set('0')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.css"/>

<select id='select_nazione' name='select_nazione'>
  <option value="0">Seleziona...</option>
  <option value='A'>A</option>
  <option value='B'>B</option>
  <option value='C'>C</option>
</select>

<select id='level_incarico' name='level_incarico'>
  <option></option>
  <option value='0'>Mondiale</option>
  <option value='1'>Nazionale</option>
  <option value='2'>Regionale</option>
  <option value='3'>Provinciale</option>
  <option value='4'>Comunale</option>
</select>

Advertisement

Answer