主页 / coding / 问题 / 77716706
Accepted
Vakindu
Asked: 2023-12-26 18:10:27 +0800 CST

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

  • 772

我希望选择第一个选择元素来确定下一个选择元素的选项。

例如，当有人在第一个选择元素中选择“Ug”时，只有选项“A 和 B”应显示在下一个选择元素中。

同样，当在第一个选择元素中选择选项“Ke”时，只有选项“C 和 D”应显示在下一个选择元素中，等等...

单击第一个选择元素后，当前代码不会在第二个选择中显示任何选项。

您能帮我解决此代码的问题吗？

代码如下所示。

提前致谢！

<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>

javascript

1 个回答

  1. Best Answer

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

    <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>

    • 0

相关问题