您的位置：首页 > 其它

二级联动

2015-08-11 23:04 344 查看

一、用js写二级联动

<body>
<select id="province" οnchange="getCity()">
<option>请选择：</option>
<option value="sx">山西省</option>
<option value="hb">河北省</option>
<option value="sd">山东省</option>
</select>

<select id="city">
<option>请选择：</option>
</select>
</body>

<script type="text/javascript">
var city = new Array();
city[0] = ["运城","太原","忻州"];
city[1] = ["邯郸","石家庄","保定"];
city[2] = ["济南","青岛","烟台"];

function getCity(){
var province = document.getElementById("province");
var Index = province.selectedIndex;
var c = document.getElementById("city");
//清空选项
c.length = 1;
for(var i = 0; i < city[Index - 1].length; i++){
var op = new Option(city[Index - 1][i]);
c.appendChild(op);
}
}
</script>

二、用JQuery写二级联动

<body>
<select name="province" id="province">

<option>请选择省份</option>

<option>山西</option>

<option>山东</option>

<option>河北</option>

</select>

<select name="city" class="city">

<option>请选择城市</option>

</select>

<select name="city" class="city"  style="display:none;">

<option>太原</option>

<option>运城</option>

<option>大同</option>

</select>

<select name="city" class="city"  style="display:none;" >

<option>济南</option>

<option>秦皇岛</option>

<option>威海</option>

</select>

<select name="city" class="city"  style="display:none;" >

<option>邯郸</option>

<option>石家庄</option>

<option>衡水</option>

</select>
</body>

<script type="text/javascript" src="jquery-1.8.0.js">
</script>
<script type="text/javascript">
$(document).ready(function(){

$('#province').change(function(){

$('#province option').each(function(i){

if($(this).attr('selected')){

$('.city').hide().eq(i).show();

}

});

});

});
</script>

三、补充知识：HTML DOM selectedIndex 属性

<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>请选择：</option>
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br /><br />
<input type="button" οnclick="getIndex()"
value="被选中的索引号是">
</form>

</body>

<script type="text/javascript">
function getIndex()
{
var x=document.getElementById("mySelect")
alert(x.selectedIndex)
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航