jquery 给select二级联动选中

原创

mob649e815375e5 2023-07-14 09:05:16 ©著作权

文章标签 下拉菜单二级联动 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815375e5的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery给select二级联动选中

什么是二级联动？

二级联动是指在一个下拉菜单中选择一个选项后，另一个下拉菜单的选项会相应地发生变化。常见的应用场景包括选择省份后根据省份的不同显示对应的城市列表。

使用jQuery实现二级联动选中

HTML结构

首先，我们需要创建一个HTML结构来容纳两个下拉菜单。

<form>
  <label for="province">选择省份：</label>
  <select id="province"></select>

  <label for="city">选择城市：</label>
  <select id="city"></select>
</form>

jQuery代码

接下来，我们使用jQuery来动态生成下拉菜单的选项，并实现二级联动的功能。

$(document).ready(function() {
  // 定义省份和城市的数据
  var data = {
    "北京市": ["北京市"],
    "上海市": ["上海市"],
    "广东省": ["广州市", "深圳市", "珠海市", "汕头市"],
    "浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市"],
    // ... 其他省份和城市的数据
  };

  // 加载省份的选项
  $.each(data, function(key, value) {
    $('#province').append($('<option></option>').attr('value', key).text(key));
  });

  // 根据选择的省份加载城市的选项
  $('#province').change(function() {
    var selectedProvince = $(this).val();
    var cities = data[selectedProvince];
    $('#city').empty();
    $.each(cities, function(index, value) {
      $('#city').append($('<option></option>').attr('value', value).text(value));
    });
  });

  // 默认选择第一个省份
  $('#province').val(Object.keys(data)[0]).change();
});