Question

我有两个选择框。如果我在选择框1中选择了新加坡，那么我想在选择框2中显示印度尼西亚，而在选择框2中不显示新加坡。请查看图片这是html代码：

<div class="input-group select2-bootstrap-prepend">
                <span class="btn" style="width:41px; border-radius: 0.25rem 0 0 0.25rem; background-color:#3b5998; color:white; border-right:none;"><i class="fas fa-ship fa-sm"></i></span>
                <select class="custom-select" id="asal">
                    <optgroup label="Singapore">
                        <option value="1">HarbourFront</option>
                        <option value="2">Tanah Merah</option>
                    </optgroup>
                    <optgroup label="Indonesia">
                        <option value="1">Batam Center</option>
                        <option value="2">Harbour Bay</option>
                        <option value="3">Nongsa</option>
                        <option value="3">Sekupang</option>
                        <option value="3">Tanjung Balai</option>
                        <option value="3">Tanjung Pinang</option>
                    </optgroup>
                </select>
            </div>
            <label class="mt-4" for="Tujuan-keberangkatan">Tujuan Keberangkatan</label>
            <div class="input-group mb-4 select2-bootstrap-prepend">
                <span class="btn" style="width:41px; border-radius: 0.25rem 0 0 0.25rem; background-color:#3b5998; color:white; border-right:none;" class="input-group-addon"><i class="fas fa-ship fa-sm"></i></span>
                <select class="custom-select" id="tujuan">
                    <optgroup label="Singapore">
                        <option value="1">HarbourFront</option>
                        <option value="2">Tanah Merah</option>
                    </optgroup>
                    <optgroup label="Indonesia">
                        <option value="1">Batam Center</option>
                        <option value="2">Harbour Bay</option>
                        <option value="3">Nongsa</option>
                        <option value="3">Sekupang</option>
                        <option value="3">Tanjung Balai</option>
                        <option value="3">Tanjung Pinang</option>
                    </optgroup>
                </select>
            </div>

Answer 1

使用jQuery onchange事件，您可以获取所选值并使用它获取optgroup标签，根据该标签我们可以隐藏/显示第二个选择值，请检查以下示例，该示例使用jQuery并显示/隐藏新加坡/印度尼西亚根据第一个选择框的值。

$(document).ready(function(){
  $("#asal").on("change", function(){
  var asallbl = $("#asal :selected").parent().attr("label");
  if(asallbl === "Singapore"){
    $("#tujuan").find("optgroup[label='Indonesia']").show();
    $("#tujuan").find("optgroup[label='Singapore']").hide();
    $("#tujuan").prop("selectedIndex", 0);
  }else{
    $("#tujuan").find("optgroup[label='Indonesia']").hide();
    $("#tujuan").find("optgroup[label='Singapore']").show();
    $("#tujuan").prop("selectedIndex", 0);
  }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group select2-bootstrap-prepend">
                <span class="btn" style="width:41px; border-radius: 0.25rem 0 0 0.25rem; background-color:#3b5998; color:white; border-right:none;"><i class="fas fa-ship fa-sm"></i></span>
                            <label class="mt-4" for="Tujuan-keberangkatan">Asal Keberangkatan</label><br/>
                <select class="custom-select" id="asal">
                    <option value="0">Choose Asal</option>
                    <optgroup label="Singapore">
                        <option value="1">HarbourFront</option>
                        <option value="2">Tanah Merah</option>
                    </optgroup>
                    <optgroup label="Indonesia">
                        <option value="1">Batam Center</option>
                        <option value="2">Harbour Bay</option>
                        <option value="3">Nongsa</option>
                        <option value="3">Sekupang</option>
                        <option value="3">Tanjung Balai</option>
                        <option value="3">Tanjung Pinang</option>
                    </optgroup>
                </select>
            </div>
            <label class="mt-4" for="Tujuan-keberangkatan">Tujuan Keberangkatan</label>
            <div class="input-group mb-4 select2-bootstrap-prepend">
                <span class="btn" style="width:41px; border-radius: 0.25rem 0 0 0.25rem; background-color:#3b5998; color:white; border-right:none;" class="input-group-addon"><i class="fas fa-ship fa-sm"></i></span>
                <select class="custom-select" id="tujuan">
                <option value="0">Choose Tujuan</option>
                    <optgroup label="Singapore">
                        <option value="1">HarbourFront</option>
                        <option value="2">Tanah Merah</option>
                    </optgroup>
                    <optgroup label="Indonesia">
                        <option value="1">Batam Center</option>
                        <option value="2">Harbour Bay</option>
                        <option value="3">Nongsa</option>
                        <option value="3">Sekupang</option>
                        <option value="3">Tanjung Balai</option>
                        <option value="3">Tanjung Pinang</option>
                    </optgroup>
                </select>
            </div>

如果我在Jquery中选择一个国家，如何更改其他国家

1 个答案: