我还有一个疑问我接近答案但没有得到它的工作，实际上我有一个默认输入文本和默认下拉列表(由西孟加拉邦和其他人组成的下拉列表)。现在，如果有人点击西孟加拉邦下拉菜单，那么默认输入应该隐藏，西孟加拉邦下拉菜单应该显示。下面是我试过的代码。任何人都可以指导我一点新的jQuery。
谢谢!!
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group otherdistricts">
<input class="form-control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").on("select",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
</script>
最佳答案
您的 jquery 代码有错误。使用下面的代码，它工作正常并经过测试。
<script>
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
//enter bengal districts
if($(this).attr("value")=="WestBengal"){
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if($(this).attr("value")=="Others"){
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>
关于javascript - 使用选择选项时如何使用jQuery隐藏和显示效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57177994/