jquery 自定义下拉联动

jQuery可以通过使用事件监听和DOM操作来创建自定义下拉联动。以下是一个简单的示例：

HTML代码：

<label for="country">Country:</label>
<select id="country">
  <option value="">Select a country</option>
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
</select>
<label for="city">City:</label>
<select id="city" disabled>
  <option value="">Select a city</option>
</select>

JavaScript代码：

$(document).ready(function() {
  $('#country').on('change', function() {
    var country = $(this).val();
    if (country == '') {
      $('#city').prop('disabled', true).html('<option value="">Select a city</option>');
    } else {
      $('#city').prop('disabled', false);
      if (country == 'usa') {
        $('#city').html('<option value="newyork">New York</option><option value="losangeles">Los Angeles</option>');
      } else if (country == 'canada') {
        $('#city').html('<option value="toronto">Toronto</option><option value="vancouver">Vancouver</option>');
      }
    }
  });
});

此代码将创建一个下拉菜单，其中第一个菜单将包含国家列表。当选择一个国家时，第二个菜单将显示该国家的城市列表。如果没有国家被选择，则第二个菜单将被禁用并显示“Select a city”选项