如果我在Jquery中选择一个国家/地区,如何更改其他国家/地区 [英] How to change other country if i select one country in Jquery
本文介绍了如果我在Jquery中选择一个国家/地区,如何更改其他国家/地区的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两个选择框.如果我在选择框1中选择了新加坡,那么我想在选择框2中显示印度尼西亚,而在选择框2中不显示新加坡.请参见图片这是html代码:
i have two select box. if i select Singapore in select box 1, i want to show Indonesia in select box 2 and singapore not display in select box 2. please see the picture this is html code :
<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>
推荐答案
使用jQuery onchange事件,您可以获取所选值,并使用它获取optgroup标签,根据该标签我们可以隐藏/显示第二个选择值,然后检查下面的示例使用jQuery,并根据第一个选择框值显示/隐藏新加坡/印度尼西亚的值.
Using jQuery onchange event, you can get the selected value and use it to get optgroup label, according to the label we can hide/show second select values, check the below example which uses jQuery and shows/hides the Singapore/Indonesia values according to the first selectbox value.
$(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中选择一个国家/地区,如何更改其他国家/地区的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文