如何 select 苗条 select 与 jquery 的选项

Question

我有一些串联的 select 可以正常工作。顺便说一句，我想将那些 selects 转换为 slim selects 但我发现这样做有些困难。例如，我有一个 ID 为 level_incarico 的 select。当我 select 一个选项 level_incarico 大于零时，其他 select 应该出现。之后，当我在 select_nazione 中更改连接 select 的选项时，选项会正确更改。但是当我 select 另一次 level_incarico 中的选项零和我 select 另一次 level_incarico 中大于零的选项出现另一次 select select_nazione 之前已经 select 编辑了选项。

这是我的 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("");
    }
});

这就是我创建 selects 的方式：

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

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

换句话说，重置 selected 选项 $("#select_nazione").val(0); 无法正常工作。它适用于普通 selects，但不适用于 slim select.

这里是我的填写方式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的值还有else
为什么在两个分支中都显示 none？

这对你有帮助吗？我从 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>

Answer 2

slim-select 是在没有 jQuery... 的情况下故意构建的。如果您有 jQuery（并计划将其保留在堆栈中），我建议您改用 select2。 slim-select 是一个很棒的库，并且由于不依赖于 jQuery 而占用空间更小。但是，select2...我敢说...更好。或者，至少有更多的便利功能。我发现 select2 更容易使用，但我想删掉 jQuery 的愿望导致我采用了 slim-select.

如何 select 苗条 select 与 jquery 的选项

How to select an option of a slim select with jquery

javascript

php

jquery

slimselect