jquery二级联动

最新推荐文章于 2024-05-06 21:09:29 发布

研不由衷

最新推荐文章于 2024-05-06 21:09:29 发布

阅读量1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41586597/article/details/84984068

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<html>
 <head>
         <meta charset="utf-8">
   <title>jQuery 二级联动</title>
     <style>
          .city{
              display: none;;
         }
          .city_first {
                         display: block;
                      }
    </style>
     <script src="../css/jquery-1.12.4.js"></script>
      <script>
          $(document).ready(function(){
              $("#province").change(function(){
                    var i = $(this).get(0).selectedIndex;
                    $('.city').hide().eq(i).show();
                 });
           });
     </script>
   </head>
 <body>
 <select id="province">
      <option>----请选择省份----</option>
       <option>北京</option>
       <option>上海</option>
       <option>江苏</option>
     </select>
<select class="city city_first">
      <option>----请选择城市----</option>
    </select>
 
<select class="city">
         <option>----请选择城市----</option>
         <option>东城</option>
         <option>西城</option>
       <option>崇文</option>
      <option>宣武</option>
       <option>朝阳</option>
   </select>
 <select class="city">
     <option>----请选择城市----</option>
      <option>黄浦</option>
       <option>卢湾</option>
       <option>徐汇</option>
       <option>长宁</option>
       <option>静安</option>
   </select>
 <select class="city">
      <option>----请选择城市----</option>
        <option>南京</option>
       <option>镇江</option>
      <option>苏州</option>
      <option>南通</option>
         <option>扬州</option>
    </select>
</body>
 </html>

<html>
<head>
    <title>Title</title>
</head>
<script src="../css/jquery-1.12.4.js"></script>
<body>
<p>省二级联动</p>
<select id="s1">
<option>请选择省份</option>
</select>

<select id="s2">
    <option>选择市</option>
</select>
</body>
<script>
var p=["河南","山东","黑龙江"];
var c=[["新","是","阿"],["的","份","放"],["1","2","3"]]
$(function () {
    for(var i=0;i<p.length;i++){
$("#s1").append($("<option></option>").val(i+1).html(p[i]))
    }
})
//为省份下拉列表绑定change事件
$("#s1").change(function(){
    var index=$(this).val()-1;//获取当前省的下标
    $("#s2").prop("length",1);//清空原有的数据
    for(var i=0;i<c[index].length;i++){//重新为市赋值
        $("#s2").append($("<option>").val(i+1).html(c[index][i]));
    }
});
</script>
</html>