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'选项。