我有3个下拉菜单。
1)国家2)州3)城市
我创建了3个有条件的下拉菜单。
=>如果没有选择国家,其他两个下拉菜单将被禁用。
=>选择国家后,只有州的下拉菜单会被激活。
=>州和城市的显示与他们的国家相对应。
你能纠正我的javascript吗?我认为只是JAvascript代码有问题!!!
下面是代码。
<script>
$(function(){
var $supcat = $("#selectCountry"),
$cat = $("#selectState"),
$subcat = $(".subcat");
$supcat.on("change",function(){
var _rel = $(this).val();
$cat.find("option").attr("style","");
$cat.val("");
if(!_rel) return $cat.prop("disabled",true);
$cat.find("[rel~='"+_rel+"']").show();
$cat.prop("disabled",false);
});
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel~='"+_rel+"']").show();
$subcat.prop("disabled",false);
});
});
</script>
subcat option{
display:none;
}
.subcat option.label{
display:block;
}
<div class="col-md-auto" id="countryDiv">
<select class="custom-select" id="selectCountry" name="selectCountry">
<option disabled selected="">-Counrty-</option>
<option value="0">In</option>
<option value="1">US</option>
<option value="2">UK</option>
</select>
</div>
<div class="col-md-auto" id="stateDiv">
<select class="custom-select" id="selectState" name="selectState" class="subcat" disabled="disabled">
<option disabled selected="">-State-</option>
<option rel="0" value="00">gujarat</option>
<option rel="0" value="01">Maharashtra</option>
<option rel="1" value="10">Us state -1</option>
<option rel="1" value="11">Us state -2</option>
<option rel="2" value="20">Uk state -1</option>
<option rel="2" value="21">Uk state -1</option>
</select>
</div>
<div class="col-md-auto" id="cityDiv">
<select class="custom-select" id="selectCity" name="selectCity" class="subcat" disabled="disabled">
<option disabled selected="">-City-</option>
<option rel="00" value="000">Rajkot</option>
<option rel="00" value="001">Pbr</option>
<option rel="01" value="001">Mumbai</option>
<option rel="01" value="001">goregav</option>
<option rel="10" value="110">Us city 1</option>
<option rel="10" value="111">Us city 2</option>
<option rel="20" value="220">Uk city 1</option>
<option rel="20" value="221">Uk city 2</option>
</select>
</div>
jQuery Dependent DropDown List
请试一试,如果你发现任何问题,请告诉我。
工作 JS Fiddle 在这里。
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );
$select1.on( 'change', function() {
$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
option {
margin: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
<select class="form-control" name="select1" id="select1">
<option value="1">India</option>
<option value="2">USA</option>
<option value="3">Russia</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control" name="select2" id="select2">
<option value="1">Gujarat</option>
<option value="1">Karnataka</option>
<option value="1">Delhi</option>
<option value="2">Texas</option>
<option value="2">California</option>
<option value="3">Balakhna<option>
</select>
</div>