jquery下拉框二级联动

最新推荐文章于 2025-05-23 14:39:25 发布

Eternal-memory

最新推荐文章于 2025-05-23 14:39:25 发布

阅读量8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发经验之谈 Javascript 文章标签： jquery js select

本文链接：https://blog.youkuaiyun.com/liuxin_1991/article/details/81094383

前端开发经验之谈同时被 2 个专栏收录

12 篇文章

订阅专栏

Javascript

11 篇文章

订阅专栏

本文详细介绍了如何使用jQuery实现下拉框的二级联动功能。通过选择一级选项，动态加载并显示对应的二级选项，为用户提供了便捷的交互体验。涉及到的核心技术包括jQuery的选择器、事件监听以及DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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": [
                
            ]
          }
        ]
      }
    ]
  }