jquery 第一个选择元素必须确定另一个选择的选项

kupeojn6  于 10个月前  发布在  jQuery
关注(0)|答案(2)|浏览(126)

我想选择第一个选择元素来确定下一个选择元素的选项。
例如,当某人在第一个选择元素中选择“Ug”时,下一个选择元素中只应显示选项“A和B”。
同样地,当在第一个选择元素中选择选项'Ke'时,只有选项'C和D'应该显示在下一个选择元素中,等等。
单击第一个select元素后,当前代码在第二个select中不显示任何选项。
你能帮我解决这个代码的问题吗?
代码看起来像下面。
先谢谢你了!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control-selector" id="countryselect" name="countryselect" required>
  <option class="select-option" value="" selected>- Choose Country</option>
  <option class="select-option" value="Ug">Ug</option>
  <option class="select-option" value="Ke">Ke</option>
  <option class="select-option" value="Rw">Rw</option>
  <option class="select-option" value="Tz">Tz</option>
  <option class="select-option" value="SA">SA</option>
</select>

<select class="form-control-selector" id="cityselect" name="cityselect" required>
  <option class="select-option" value="" selected>- Choose City </option>

  <option class="select-option" value="A">A</option>
  <option class="select-option" value="B">B</option>

  <option class="select-option" value="C">C</option>
  <option class="select-option" value="D">D</option>

  <option class="select-option" value="E">E</option>
  <option class="select-option" value="F">F</option>

  <option class="select-option" value="G">G</option>
  <option class="select-option" value="H">H</option>

  <option class="select-option" value="I">I</option>
  <option class="select-option" value="J">J</option>
</select>

<script>
    $("#countryselect").change(function(){
        var selectedOption = $("select option:selected").text();
        $("#cityselect").empty();
        for(var index=1;index<10;index++){
            if(index>=parseInt(selectedOption)){
                $("#cityselect").append($('<option></option>').html(index));
            }
        }
    });
</script>

字符串

4dbbbstv

4dbbbstv1#

您还可以启用/禁用表单字段,而不是添加和删除选择元素的选项。在本例中,每个cityselect都在自己的字段集中。所有字段集最初都是禁用的。当选择了countryselect中的选项时,匹配的字段集将被启用。
多个表单域具有相同的名称不是问题。如果表单域或域集被禁用,则表单域不会包含在提交事件中。

document.forms.form01.countryselect.addEventListener('change', e => {
  let form = e.target.form;
  [...form.elements]
    .filter(elm => elm.nodeName == 'FIELDSET')
    .forEach(elm => elm.disabled = true);
  form[e.target.value].disabled = false;
});
fieldset {
  border: none;
}

fieldset:disabled {
  display: none;
}
<form name="form01">
  <select class="form-control-selector" name="countryselect" required>
    <option class="select-option" value="" selected>- Choose Country</option>
    <option class="select-option" value="Ug">Ug</option>
    <option class="select-option" value="Ke">Ke</option>
    <option class="select-option" value="Rw">Rw</option>
    <option class="select-option" value="Tz">Tz</option>
    <option class="select-option" value="SA">SA</option>
  </select>
  <fieldset name="Ug" disabled>
    <select class="form-control-selector" name="cityselect" required>
      <option class="select-option" value="" selected>- Choose City </option>
      <option value="A">A</option>
      <option value="B">B</option>
    </select>
  </fieldset>
  <fieldset name="Ke" disabled>
    <select class="form-control-selector" name="cityselect" required>
      <option class="select-option" value="" selected>- Choose City </option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </fieldset>
</form>
ryevplcw

ryevplcw2#

此代码检查第一个选择元素(#countryselect)中的选定选项,并相应地填充第二个选择元素(#cityselect)。您可以扩展每个国家/地区的if条件,并添加相应的城市选项。如果有许多国家/地区,您可以考虑使用switch语句或更高级的数据结构将国家/地区Map到城市。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control-selector" id="countryselect" name="countryselect" required>
  <option class="select-option" value="" selected>- Choose Country</option>
  <option class="select-option" value="Ug">Ug</option>
  <option class="select-option" value="Ke">Ke</option>
  <option class="select-option" value="Rw">Rw</option>
  <option class="select-option" value="Tz">Tz</option>
  <option class="select-option" value="SA">SA</option>
</select>

<select class="form-control-selector" id="cityselect" name="cityselect" required>
  <option class="select-option" value="" selected>- Choose City </option>
</select>

<script>
    $("#countryselect").change(function(){
        var selectedOption = $(this).val();
        $("#cityselect").empty();
        
        if(selectedOption === "Ug"){
            $("#cityselect").append($('<option value="A">A</option>'));
            $("#cityselect").append($('<option value="B">B</option>'));
        } else if(selectedOption === "Ke"){
            $("#cityselect").append($('<option value="C">C</option>'));
            $("#cityselect").append($('<option value="D">D</option>'));
        } else if(selectedOption === "Rw"){
            // Add options for Rwanda
        } else if(selectedOption === "Tz"){
            // Add options for Tanzania
        } else if(selectedOption === "SA"){
            // Add options for South Africa
        }
    });
</script>

字符串

相关问题