js三级联动

最新推荐文章于 2022-08-01 10:35:47 发布

原创最新推荐文章于 2022-08-01 10:35:47 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

HTML5、CSS、JavaScript 专栏收录该内容

53 篇文章

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type"

content="text/html; charset=utf-8" />
    <title></title>
<script src="Scripts/jquery-

1.8.2.min.js"></script>

<script type="text/javascript">
var aProv=["1","2","3"];
var aCity=[["12","12","12"],["12","12","12"],

["12","12","12","12","12"]];
var aCountry=[[["12","12","12","12","12"],

["12","12","12","12"],

["2","1","2","12","21","21","12","12"]],

[["23","23"]],[["32","32"]]];

var num1=0;
var num2=0;
var tk=["1","2","3"];
    $(function(){
     for(var i=0;i<aProv.length;i++)
     {
        $("#selProv").append("<option>"+aProv

[i]+"</option>");
}
       $("#selProv").change(function(){
          $("#selCity").children("option").not

(":eq(0)").remove();
          $("#selCountry").children

("option").not(":eq(0)").remove();
          num1=parseInt($(this).children

("option:selected").index());
          if(num1>0)
           {
             var aC=aCity[num1-1];
             for(var i=0;i<aC.length;i++)
              {
        $("#selCity").append

("<option>"+aC[i]+"</option>");
}
}

});

    $("#selCity").change(function(){

          $("#selCountry").children

("option").not(":eq(0)").remove();
          num2=parseInt($(this).children

("option:selected").index());
          if(num2>0)
           {
             var aC=aCoutry[num1-1][num2-1]
             for(var i=0;i<aC.length;i++)
              {
        $("#selCountry").append

("<option>"+aC[i]+"</option>");
}
}

});

});
</script>
</head>
<body>
<select id="selProv">
      <option>---请选择---</option>
</select>
<select id="selCity">
      <option>---请选择---</option>
</select>
<select id="selCountry">
      <option>---请选择---</option>
</select>
</body>
</html>