HTML5的option属性：如何使用option属性实现级联下拉列表

!DOCTYPE>
    html>
    head>
    tITle>
    级联下拉列表/title>
    meta charset="UTF-8">
    /head>
    body onload="load()">
    p>
    select class='PRov' id='prov' onchange='changeCity()'>
    option value=''>
    --请选择省--/option>
    /select>
    select class='city' id='city'>
    option value=''>
    --请选择市--/option>
    /select>
    /p>
    script>
    VAR province=document.getElementById("prov");
    var city=document.getElementById("city");
    var arr_prov=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
    var arr_city=new Array();
    arr_city[0]=new Array(new Option("--请选择市--",''));
    arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
    arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
 //动态载入所有省份function load(){
     for(var i=0;
    iarr_prov.length;
i++){
     province.options[i]=arr_prov[i];
 }
 }
 //选中省份之后，根据索引动态载入相应城市 function changeCity(){
    //清空上次的选项city.options.length=0;
     //获取省一级的下拉列表选中的索引var index=province.selectedIndex;
    for(var i=0;
    iarr_city[index].length;
i++){
    city.options[i]=arr_city[index][i];
}
 }
    /script>
    /body>
    /html>
    

相关文章推荐：

html5自定义属性：如何获取自定义属性值（附代码）

HTML的Select对象如何进行Option对象的操作

以上就是HTML5的option属性：如何使用option属性实现级联下拉列表的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！