我有以下问题:
我开始用HTML和JS创建表单,并且有两个下拉菜单(国家和城市)。现在,我想使用JQuery使这两个动态,以便仅显示所选国家/地区的城市。
我从一些基本的JS入手,但效果不错,但在IE中却有些麻烦。现在,我正在尝试将JS转换为JQuery,以获得更好的兼容性。
我原来的JS看起来像这样:
function populate(s1, s2) { var s1 = document.getElementById(s1); var s2 = document.getElementById(s2); s2.innerHTML = ""; if (s1.value == "Germany") { var optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"]; } else if (s1.value == "Hungary") { var optionArray = ["|", "pecs|Pecs", "budapest|Budapest", "debrecen|Debrecen"]; } else if (s1.value == "Russia") { var optionArray = ["|", "st. petersburg|St. Petersburg"]; } else if (s1.value == "South Africa") { var optionArray = ["|", "midrand|Midrand"]; } else if (s1.value == "USA") { var optionArray = ["|", "downers grove|Downers Grove"]; } else if (s1.value == "Mexico") { var optionArray = ["|", "puebla|Puebla"]; } else if (s1.value == "China") { var optionArray = ["|", "beijing|Beijing"]; } else if (s1.value == "Spain") { var optionArray = ["|", "barcelona|Barcelona"]; } for (var option in optionArray) { var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; s2.options.add(newOption); } };
我知道这很简单,但是我看不到树木的木头。
它应该像
jQuery(function($) { var locations = { 'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'], 'Spain': ['Barcelona'], 'Hungary': ['Pecs'], 'USA': ['Downers Grove'], 'Mexico': ['Puebla'], 'South Africa': ['Midrand'], 'China': ['Beijing'], 'Russia': ['St. Petersburg'], } var $locations = $('#location'); $('#country').change(function () { var country = $(this).val(), lcns = locations[country] || []; var html = $.map(lcns, function(lcn){ return '<option value="' + lcn + '">' + lcn + '</option>' }).join(''); $locations.html(html) }); });