使用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请求中过滤掉它,或者在源中删除它。 🙂