Question

所以我想做的是制作一个动态的小脚本来选择countys然后选择城市。好吧，我在mysql数据库中拥有所有的countys和citys。如果我在<select>标记中选择了一个县，则与该县相关的城市应显示在下一个<select>标记中。

所以基本上也许我可以做像

这样的事情

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

其中countys的选项可能如下所示：

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

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

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

Answer 2

你可以这样做，但如果你想按类或身份选择城市所在的元素，你必须改变两件事：

分别使用类或id选择器：$（'。'+ this.name）或$（'＃'+ this.name）。
确保您的类或ID中没有空格。

编辑：

也许onchange在这里更合适：

HTML：

<select id="counties">
    <option value="">Choose one...</option>
    <option value="the-county">The county</option>
    <option value="the-other-county">The other county</option>
</select>

<div class="city the-county">The city</div>
<div class="city the-county">The second city</div>
<div class="city the-other-county">The other city</div>

javascript：

$(document).ready(function() {
    var showCities = function(county) {
        var $cities = $('.city'),
            $countyCities = county ? $('.city.' + county) : [],
            $otherCities = $cities.not($countyCities);

        $otherCities.hide();
        $countyCities.show();
    }

    $('#counties').change(function() {
        showCities($(this).val());
    });

    // Don't show anything at page load.
    showCities(null);
});

Answer 3

一个非常简单的客户端实现将是这样的：

$(document).ready(function() {
  $('.county').change(function(){
      $.get('/cities', {whichCounty: $(this).val()}, function(html) {
          $('#cities').html(html);         
      });
  });
});

以上假设您的服务器设置采用whichCounty参数，并将完全汇编的<select>发送回客户端，并将其注入#cities容器。

另一种方法是让服务器发送回JSON键值对（例如CityId =＆gt; CityName），清除当前选择的选项，并循环新值，动态构造选项并附加它们到了城市＆＃39; <select>。

如果上面的示例比后者（JSON）方法有任何优势，那么它很容易在客户端实现。

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

3 个答案: