jQuery 多级联动实现：示例与代码详解

jQuery可以通过使用嵌套的选择器来实现多级联动。

以下是一个简单的例子，其中三个下拉列表之间存在级联关系。

HTML代码：

<select id='country'>
  <option value=''>--请选择国家--</option>
  <option value='china'>中国</option>
  <option value='usa'>美国</option>
</select>

<select id='province'>
  <option value=''>--请选择省份--</option>
</select>

<select id='city'>
  <option value=''>--请选择城市--</option>
</select>

JavaScript代码：

$(document).ready(function(){
  $('#country').change(function(){
    var country = $(this).val();
    if(country == 'china'){
      $('#province').html('<option value=''>--请选择省份--</option><option value='beijing'>北京</option><option value='shanghai'>上海</option>');
    }else if(country == 'usa'){
      $('#province').html('<option value=''>--请选择州--</option><option value='ny'>纽约</option><option value='ca'>加利福尼亚</option>');
    }else{
      $('#province').html('<option value=''>--请选择--</option>');
    }
    $('#city').html('<option value=''>--请选择--</option>');
  });
  
  $('#province').change(function(){
    var province = $(this).val();
    if(province == 'beijing'){
      $('#city').html('<option value=''>--请选择城市--</option><option value='dongcheng'>东城区</option><option value='xicheng'>西城区</option>');
    }else if(province == 'shanghai'){
      $('#city').html('<option value=''>--请选择城市--</option><option value='huangpu'>黄浦区</option><option value='jingan'>静安区</option>');
    }else if(province == 'ny'){
      $('#city').html('<option value=''>--请选择城市--</option><option value='manhattan'>曼哈顿</option><option value='queens'>皇后区</option>');
    }else if(province == 'ca'){
      $('#city').html('<option value=''>--请选择城市--</option><option value='losangeles'>洛杉矶</option><option value='sanfrancisco'>旧金山</option>');
    }else{
      $('#city').html('<option value=''>--请选择--</option>');
    }
  });
});

在这个例子中，当用户选择一个国家后，省份下拉列表的选项将根据所选国家进行更新。然后，当用户选择一个省份后，城市下拉列表的选项将根据所选省份进行更新。

此外，当用户更改国家或省份时，城市下拉列表将被重置为“--请选择--”选项。

这是一个简单的多级联动例子，您可以根据需要进行修改和扩展。