使用jQuery和Ajax填充第二個下拉列表

我想填充第二個下拉列表，基於第一個下拉列表的值從外部html文件中只填充了選項。使用jQuery和Ajax填充第二個下拉列表

外部文件的實施例：

<select> 
<option value="GB">UNITED KINGDOM</option> //option to load drop-GB.html 
<option value="US">UNITED STATES</option> //option to load drop-US.html 
</select>

這一切都正常工作在FF/Safari /鉻，但不是在所有的IE或ipad：第一下拉值

<option value="Bedfordshire">Bedfordshire</option> 
<option value="Berkshire">Berkshire</option> 
<option value="Buckinghamshire">Buckinghamshire</option>

實施例？

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 
      }, 

     }); 

    });

來源

2011-10-13 dbach

當你說它劑量的工作，你到底是什麼意思？ –

嗨馬可，預加載不加載第二滴，既不在改變事件，希望這有助於。這裏是一個工作示例：http://sbdev.ltb-media.com/test.html – dbach

您沒有排序你進入HTML，而且由於它不是「純粹」的元素而Firefox/Chrome瀏覽器等試圖修復它的IE失敗。

你落US.html包含HTML結構像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<!-- BC_OBNW --> 
<head> 
<title>drop-US</title> 
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" /> 
<script type="text/javascript">var jslang='EN';</script> 
</head>

它然後嘗試插入選擇框。

所以你應該在ajax請求中過濾掉它，或者在源代碼中刪除它。 :)

來源

2011-10-13 11:49:33

Errr，我剛剛注意到了！外部文件是純粹的，但系統會自動放入所有的垃圾！ – dbach

然後，您可以將選項放在ID爲#ShippingStateSelect的div中，然後使用加載來過濾，如$ ShippingStateSelect.load（'drop-'+ countryName +'.html #ShippingStateSelect'）; –

使用jQuery和Ajax填充第二個下拉列表

回答

相關問題