jQuery动态联动二

最新推荐文章于 2018-12-13 10:53:14 发布
AIBottle
最新推荐文章于 2018-12-13 10:53:14 发布
阅读量464
点赞数
分类专栏：下拉列表的联动
下拉列表的联动专栏收录该内容
4 篇文章
订阅专栏
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>二级联动案例</title>
 </head>
 <body>
  <fieldset>
   <legend>用户注册页面</legend>
   <form>
      <table>
         <tr>
            <td>用户名:</td>
            <td><input type="text" name="user"></td>
         </tr>
         <tr>
            <td>密码:</td>
            <td><input type="password" name="pwd"></td>
         </tr>
         <tr>
            <td>确认密码:</td>
            <td><input type="password" name="repwd"></td>
         </tr>
         <tr>
            <td>Email:</td>
            <td><input type="email" name="mail"></td>
         </tr>
         <tr>
            <td>籍贯:</td>
            <td>
               <select id="province">
                  <option>请选择</option>
                  <option>吉林省</option>
                  <option>辽宁省</option>
                  <option>山东省</option>
               </select>
               <select id="city">
                  <option>请选择</option>
               </select>
            </td>
         </tr>
         <tr>
            <td></td>
            <td><input type="submit" value="注册"></td>
         </tr>
      </table>
   </form>
  </fieldset>
  <script>
   /*
      需求 - 省份列表中具有数据,城市列表中没有任何数据
      * 当用户选择了省份信息后,在城市列表中提供相对应的数据
      <select>元素的特点
      * <option>元素,无论设置value还是默认value
    */
   // 1. 获取省份列表,绑定onchange事件
   var provinceElement = document.getElementById("province");
   provinceElement.onchange = function(){
      // 清空城市列表
      var cityElement = document.getElementById("city");
      var opts = cityElement.getElementsByTagName("option");
      for(var z=1;z<opts.length;z++){
         cityElement.removeChild(opts[z]);
         z--;
      }
      
      /*
         2. 得到用户选择的省份信息
          * 第一种
           * 根据id为province的select元素,查找所有option元素
           * 遍历得到的所有option元素
           * 使用if判断,哪个option元素具有selected属性
         * 第二种
           * 直接通过select元素的value属性值得到
       */
      var provinceValue = provinceElement.value;
      /*
         3. 根据不同的省份提供不同的城市信息(数组)
          * 吉林省 - 长春市,吉林市,松原市,四平市,通化市
         * 辽宁省 - 沈阳市,大连市,铁岭市,丹东市,锦州市
         * 山东省 - 济南市,青岛市,威海市,日照市,德州市
       */
      var cities;
      switch (provinceValue){
         case "吉林省":
            cities = ["长春市","吉林市","松原市","四平市","通化市"];
            break;
         case "辽宁省":
            cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
            break;
         case "山东省":
            cities = ["济南市","青岛市","威海市","日照市","德州市"];
            break;
      }
      /*
         4. 解析数组的数据内容
          a. 遍历存储城市信息的数组
         b. 得到每个城市信息
         c. 创建<option>元素,将城市信息写入
         d. 将创建的<option>元素添加到城市列表中
       */
      for(var i=0;i<cities.length;i++){
         var cityValue = cities[i];
         
         var option = document.createElement("option");
         var textNode = document.createTextNode(cityValue);
         option.appendChild(textNode);

         cityElement.appendChild(option);
      }
   }
  </script>
 </body>
</html>