如果我在 Jquery 中選擇一個國家，如何更改其他國家

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>