使用jQuery和Ajax填充第二个下拉列表
我试图根据外部html文件的第一个下拉列表的值填充第二个下拉列表,该文件仅填充选项。
外部文件示例:
Bedfordshire Berkshire Buckinghamshire
第一个下拉值的示例:
UNITED KINGDOM //option to load drop-GB.html UNITED STATES //option to load drop-US.html
这一切在FF / Safari / Chrome中运行良好但在IE或iPad中根本没有?
var $shipcountry = $('#ShippingCountry'); $ShippingStateSelect = $('#ShippingStateSelect'); $ShippingStateSelect.load('drop-GB.html'); //pre load default list $shipcountry.change(function () { var countryName = $shipcountry.val(); $.ajax({ type: 'GET', url: 'drop-' + countryName + '.html', success: function (msg) { $ShippingStateSelect.load('drop-' + countryName + '.html'); //fire other events on page }, error: function (msg) { $ShippingStateSelect.hide(); //show error message here }, }); });
您没有对传入的HTML进行排序,因为它不是“纯”元素,IE会在Firefox / Chrome等尝试修复时失败。
你的drop-US.html包含HTML结构
drop-US
然后它会尝试插入到选择框中。
因此,您应该在ajax请求中过滤掉它,或者在源中删除它。 🙂