如何动态切换 jquery 中的元素？

所以我想做的是制作一个动态的小脚本来选择县和城市。好吧，我在 mysql 数据库中拥有所有国家和城市。如果我选择一个县<select>标签与县相关的城市应该出现在下一个<select> tag.

所以基本上也许我可以做类似的事情

$(document).ready(function() {
  $('.county').click(function(){
    $(this.name).toggle(); 
  });
});

县的选项可能如下所示：

<option value="This County" name="This County" class="county">This County</option>

当我点击上面的这个时，每个城市都会连接到"This County"应该出现。只是需要一些罚款。有人认为他们可以提供帮助吗？

如果所有内容都已以以下形式显示在页面上select那么您可以使用县选项的值来显示正确的select.

$("#counties").change(function(){
   $(".cities").hide();
   $("#" + this.value + "-cities").show();
});

这个工作的例子：http://jsfiddle.net/jonathon/upaar/ http://jsfiddle.net/jonathon/upaar/

但是，我建议不要这样做，因为它不太好。即使您只需要少量城市，您的页面上也会包含所有城市。最好的选择是填充您的县列表，然后使用您自己的 JSON 和$.get() http://api.jquery.com/jQuery.get/ method.

例如（我只是使用GeoNames http://www.geonames.org在这里，您将替换为您自己的数据）；

$.get('http://ws.geonames.org/countryInfoJSON', function(data) {
    $.each(data.geonames, function(i, item) {
        $("#countries").append("<option value='" + item.geonameId + "'>" + item.countryName + "</option>");
    });
});

$("#countries").change(function() {
    $("#cities").empty();

    $.get('http://ws.geonames.org/childrenJSON?geonameId=' + this.value, function(data) {
        $.each(data.geonames, function(i, item) {
            $("#cities").append("<option value='" + item.geonameId + "'>" + item.name + "</option>");
        });
    });
});

它的工作示例：http://jsfiddle.net/jonathon/QkXAK/ http://jsfiddle.net/jonathon/QkXAK/

上面加载了国家并设置了更改事件countries选择。当该值发生变化时，它会向服务器发送所需的数据。在这种情况下，它发送geonameId并找到该国家/地区的子元素。然后它会清除cities选择并添加 AJAX 请求中返回的城市。

这样做的好处是您只加载您需要的内容，从而不必在页面加载时发送所有数据。我在示例中使用 GeoNames，但如果您有自己的数据集，那么基本原理是相同的。