jquery下拉框二级联动

<div class="select_addApply">
	<!--选择一级分类-->
	<select name="province" id="province" class="classify">
		<option value="选择一级分类">选择一级分类</option>
	</select>
	<div class="errorBox select01"><i class="icon icon_error"></i><span>此项不能为空</span></div><br />
	<!--选择二级分类-->
	<select name="city" id="city" class="classify mt10">
		<option value="">选择二级分类</option>
	</select>
	<div class="errorBox select02"><i class="icon icon_error"></i><span>此项不能为空</span></div>
</div>
	//获取一级二级联动下拉菜单数据
	$.ajax({
		type: "GET",
		url: "XXXXXXXXXXXXXXXXXXXXXXXXX",
		dataType: "json",
		success: function(res) {
			/*一级二级联动下拉菜单*/
			//console.log(res);
			var data = res.data.option;
            //console.log(typeof(res));
			for(var key in data) {
				//console.log(data[i].id + "===" + data[i].options[0].name)
				$("#province").append("<option value='" + key + "'>" + data[key].name + "</option>");
			}
			$("#province").change(function() {
				var now_province = $(this).val();
				$("#city").html('<option value="">选择二级分类</option>');
				for(var k in data[now_province].options) {
					var now_city = data[now_province].options[k];
					$("#city").append('<option value="' + k + '">' + now_city.name + '</option>');
				}
			});
		}
	});
//json格式数据
 "data": {
    "option": [
      {
        "id": 1,
        "name": "name1",
        "options": [
          {
            "id": 3,
            "name": "name1_1",
            "options": [
                
            ]
          },
          {
            "id": 4,
            "name": "name1_2",
            "options": [
                
            ]
          },
          {
            "id": 5,
            "name": "name1_3",
            "options": [
                
            ]
          }
        ]
      },
      {
        "id": 2,
        "name": "name2",
        "options": [
          {
            "id": 6,
            "name": "name2_1",
            "options": [
                
            ]
          },
          {
            "id": 7,
            "name": "name2_2",
            "options": [
                
            ]
          },
          {
            "id": 8,
            "name": "name2_3",
            "options": [
                
            ]
          }
        ]
      }
    ]
  }

猜你喜欢

转载自blog.csdn.net/liuxin_1991/article/details/81094383
今日推荐