jquery下拉框的联动效果

下面是关于“jQuery下拉框的联动效果”的完整攻略，包含两个示例说明。

简介

下拉框是 Web 开发中常用的组件之一，而下拉框的联动效果可以提高用户体验。在本文中，我们将介绍如何使用 jQuery 实现下拉框的联动效果，包括如何获取下拉框的值、如何根据下拉框的值来更新页面等。

步骤一：获取下拉框的值

在实现下拉框的联动效果前，需要先获取下拉框的值。可以使用 jQuery 的 val() 方法来获取下拉框的值。以下是一个示例：

<select id="province">
  <option value="1">北京</option>
  <option value2">上海</option>
  <option value="3">广东</option>
</select>

<select id="city">
  <option value="11">北京市</option>
  <option value="12">天津市</option>
  <option value="13">石家庄市</option>
  <option value="21">上海市</option>
  <option value="22">南京市</option>
  <option value="23">杭州市</option>
  <option value="31">广州市</option>
  <option value="32">深圳市</option>
  <option value="33">珠海市</option>
</select>

<script>
  $('#province').change(function() {
    var provinceId = $(this).val();
    console.log(provinceId);
  });
</script>

在上面的代码中，我们使用 jQuery 的 change() 方法来监听 province 下拉框的变化事件，并使用 val() 方法来获取下拉框的值。可以在控制台中看到输出的值。

步骤二：根据下拉框的值来更新页面

获取下拉框的值后，可以根据下拉框的值来更新页面。以下是一个示例：

<select id="province">
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
</select>

<select id="city">
  <option value="11" data-province="1">北京市</option>
  <option value="12" data-province="1">天津市</option>
  <option value="13" data-province="1">石家庄市</option>
  <option value="21" data-province="2">上海市</option>
  <option value="22" data-province="2">南京市</option>
  <option value="23" data-province="2">杭州市</option>
  <option value="31" data-province="3">广州市</option>
  <option value="32" data-province="3">深圳市</option>
  <option value="33" data-province="3">珠海市</option>
</select>

<script>
  $('#province').change(function() {
    var provinceId = $(this).val();
    $('#city option').hide();
    $('#city option[data-province="' + provinceId + '"]').show();
  });
</script>

在上面的代码中，我们使用 data-province 属性来标记每个城市所属的省份，并使用 show() 和 hide() 方法来根据省份的值来显示或隐藏城市选项。可以在浏览器中测试下拉框的联动效果。

示例一：省市区三级联动

省市区三级联动是一种常见的下拉框联动效果。以下是一个示例：

<select id="province">
  <option value="">请选择省份</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
  <option value="11" data-province="1">北京市</option>
  <option value="12" data-province="1">天津市</option>
  <option value="13" data-province="1">石家庄市</option>
  <option value="21" data-province="2">上海市</option>
  <option value="22" data-province="2">南京市</option>
  <option value="23" data-province="2">杭州市</option>
  <option value="31" data-province="3">广州市</option>
  <option value="32" data-province="3">深圳市</option>
  <option value="33" data-province="3">珠海市</option>
</select>

<select id="district">
  <option value="">请选择区县</option>
  <option value="1101" data-city="11">东城区</option>
  <option value="1102" data-city="11">西城区</option>
  <option value="1201" data-city="12">和平区</option>
  <option value="1202" data-city="12">河东区</option>
  <option value="1301" data-city="13">长安区</option>
  <option value="1302" data-city="13">桥东区</option>
  <option value="2101" data-city="21">黄浦区</option>
  <option value="2102" data-city="21">徐汇区</option>
  <option value="2201" data-city="22">玄武区</option>
  <option value="2202" data-city="22">秦淮区</option>
  <option value="2301" data-city="23">上城区</option>
  <option value="2302" data-city="23">下城区</option>
  <option value="3101" data-city="31">越秀区</option>
  <option value="3102" data-city="31">荔湾区</option>
  <option value="3201" data-city="32">福田区</option>
  <option value="3202" data-city="32">罗湖区</option>
  <option value="3301" data-city="33">香洲区</option>
  <option value="3302" data-city="33">斗门区</option>
</select>

<script>
  $('#province').change(function() {
    var provinceId = $(this).val();
    $('#city option').hide();
    $('#city option[data-province="' + provinceId + '"]').show();
    $('#city').val('');
    $('#district option').hide();
    $('#district').val('');
  });

  $('#city').change(function() {
    var cityId = $(this).val();
    $('#district option').hide();
    $('#district option[data-city="' + cityId + '"]').show();
    $('#district').val('');
  });
</script>

在上面的代码中，我们使用 data-city 属性来标记每个区县所属的城市，并使用 val() 方法来清空下一级的选项。可以在浏览器中测试省市区三级联动效果。

示例二：根据下拉框的值来更新表格

除了更新下拉框外，还可以根据下拉框的值来更新表格。以下是一个示例：

<select id="category">
  <option value="">请选择分类</option>
  <option value="1">电子产品</option>
  <option value="2">家具用品</option>
  <option value="3">食品饮料</option>
</select>

<table id="product">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>分类</th>
    </tr>
  </thead>
  <tbody>
    <tr data-category="1">
      <td>iPhone 12</td>
      <td>6999</td>
      <td>电子产品</td>
    </tr>
    <tr data-category="1">
      <td>iPad Pro</td>
      <td>7999</td>
      <td>电子产品</td>
    </tr>
    <tr data-category="2">
      <td>沙发</td>
      <td>1999</td>
      <td>家具用品</td>
    </tr>
    <tr data-category="2">
      <td>床</td>
      <td>2999</td>
      <td>家具用品</td>
    </tr>
    <tr data-category="3">
      <td>可乐</td>
      <td>3</td>
      <td>食品饮料</td>
    </tr>
    <tr data-category="3">
      <td>薯片</td>
      <td>5</td>
      <td>品饮料</td>
    </tr>
  </tbody>
</table>

<script>
  $('#category').change(function() {
    var categoryId = $(this).val();
    $('#product tbody tr').hide();
    $('#product tbody tr[data-category="' + categoryId + '"]').show();
  });
</script>

在上面的代码中，我们使用 data-category 属性来标记每个产品所属的分类，并使用 show() 和 hide() 方法来根据分类的值来显示或隐藏产品行。可以在浏览器中测试根据下拉框的值来更新表格的效果。

总结

在本文中，我们介绍了如何使用 jQuery 实现下拉框的联动效果，包括如何获取下拉框的值、如何根据下拉框的值来更新页面等。并提供了两个示例，分别演示了省市区三级联动和根据下拉框的值来更新表格。实际应用中，可以根据具体需求选择适合自己的解决方案。

参考链接

• jQuery 官方文档