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

Question

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

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

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

县的选项可能如下所示:

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

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

Answer 1

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

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

此工作示例:http://jsfiddle.net/jonathon/upaar/

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

例如(我在这里只是使用GeoNames，您可以用自己的数据替换)；

$.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/

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

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