如何使用jquery选择slim select选项

Question

我有一些连接的选择工作良好。顺便说一句，我想把这些选择转换成很小的选择，但我发现这样做有些困难。例如，我有一个ID为level_incarico的select。当我选择level_incarico的一个大于零的选项时，应该会出现其他选择。之后，当我更改级联选择的选项（例如在select_nazione中）时，该选项会正确更改。但是，当我选择另一次时，level_incarico中的选项zero和我选择另一次时，level_incarico中大于zero的选项会出现，而另一次选择select_nazione中已经选择了选项。

这是我的javascript代码：

$("#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("");
    }
});

这是我创建所选内容的方式：

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

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

换句话说，所选选项$（“#select_Nazione”）.val(0)；的重置不能正常工作。它适用于普通选择，但不适用于slim选择。

下面是我如何填写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>";

下面是我如何填写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>";

能帮上忙吗？

Answer 1

• 为什么对全部为0的值使用其他值
• 为什么在两个分支中都显示无？

这对你有帮助吗？我从手册上得到的代码

null

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>