如何动态切换jquery中的元素？
所以我想做的是制作一个动态的小脚本来选择countys然后选择城市。 好吧，我在mysql数据库中拥有所有的countys和citys。 如果我在标记中选择一个县，则与该县相关的城市应显示在下一个标记中。
所以基本上也许我可以做点什么
$(document).ready(function() { $('.county').click(function(){ $(this.name).toggle(); }); });
其中countys的选项可能是这样的：
This County
当我点击上面的内容时，每个连接到"This County"城市都会出现。 只需要对此进行一些罚款。 有人认为他们可以帮忙吗？
如果所有内容都以selectforms出现在页面上，那么您可以使用county选项的值来显示正确的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(""); }); }); $("#countries").change(function() { $("#cities").empty(); $.get('http://ws.geonames.org/childrenJSON?geonameId=' + this.value, function(data) { $.each(data.geonames, function(i, item) { $("#cities").append(""); }); }); });
工作示例： http ： //jsfiddle.net/jonathon/QkXAK/
以上加载国家/地区并设置countries选择的更改事件。 当此值更改时，它将使用所需数据进入服务器。 在这种情况下，它发送geonameId并查找该国家/地区的子元素。 然后它清除cities选择并添加在AJAX请求中返回的城市。
这样做的好处是您只需加载所需内容，从而避免在页面加载时发送所有数据。 我在示例中使用GeoNames，但如果您有自己的数据集，那么基本原则是相同的。
一个非常简单的客户端实现将是这样的：
$(document).ready(function() { $('.county').change(function(){ $.get('/cities', {whichCounty: $(this).val()}, function(html) { $('#cities').html(html); }); }); });
以上假设您有一个服务器设置，它接受一个whichCounty参数，并将完全组装的发送回客户端，该客户端被注入#cities容器。
另一种方法是让服务器发送回JSON键值对（例如CityId => CityName），清除当前选择的选项，并循环新值，动态构建选项并将它们附加到’城市’ 。
如果上面的示例比后者（JSON）方法有任何优势，那么它很容易在客户端实现。
您可以这样做，但如果您想按类或ID选择城市所在的元素，则必须更改两件事：
- 使用类或id选择器：$（’。’+ this.name）或$（’＃’+ this.name）。
- 确保您的类或ID中没有空格。
编辑：
也许onchange在这里更合适：
HTML：
The city The second city The other city
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); });