下拉爲最小值和最大值，而不是在EI9和IE8更新JQuery

Question

我有這些數值下拉選擇最小值和最大值，當您選擇其中一個下拉的值時，其他人應該更新刪除值不在範圍內，例如： 如果MIN = 15000 - >最大選項將開始15000和將不顯示10K和5K選項

HTML

<div class="filters" id="size-filters"> 
<select id="sf-size-min" name="sf-size-min" class="price-dropdown"> 
    <option selected="selected" disabled="disabled" value="none">Space Min</option> 
    <option value="0">0</option> 
    <option value="5000">5,000</option> 
    <option value="10000">10,000</option> 
    <option value="15000">15,000</option> 
    <option value="20000">20,000</option> 
    <option value="25000">25,000</option> 
</select> 
<select id="sf-size-max" name="sf-size-max" class="price-dropdown"> 
    <option selected="selected" disabled="disabled" value="none">Space Max</option> 
    <option value="0">0</option> 
    <option value="5000">5,000</option> 
    <option value="10000">10,000</option> 
    <option value="15000">15,000</option> 
    <option value="20000">20,000</option> 
    <option value="25000">25,000</option> 
</select> 

JS

$(function(){ 

var all_values=[]; 

var initial_options=$('#sf-size-min').get(0).options; 
for(i=0; i<initial_options.length; i++) 
{ 
    var val=parseInt(initial_options[i].value); 
    var lbl=initial_options[i].label;  
    all_values[i]={value: val, label: lbl }; 

} 

document.getElementById('sf-size-min').options;//$('#sf-size-min').get(0).options; 

$('#sf-size-min').change(function(){ 
    var $src=$('#sf-size-min'); 
    var $target=$('#sf-size-max'); 
    var prev_max_value=$target.val(); 
    var current_min_value=$src.val(); 

    //clear max drop down list 
    $target.get(0).options.length=0; 

    var j=0; 
    for(i=$src.get(0).selectedIndex; i<all_values.length; i++) 
    { 
     $target.get(0).options[j++]=new Option(all_values[i].label, all_values[i].value); 
    } 
    $target.val(prev_max_value); 


}); 

$('#sf-size-max').change(function(){ 
    var $src=$('#sf-size-max'); 
    var $target=$('#sf-size-min'); 
    var prev_min_value=$target.val(); 
    var current_max_value=parseInt($src.val()); 

    //clear min drop down list 
    $target.get(0).options.length=0; 

    var j=0; 
    for(i=0; i<all_values.length; i++) 
    { 
     if (current_max_value > all_values[i].value) 
      $target.get(0).options[j++]=new Option(all_values[i].label, all_values[i].value); 
    } 
    $target.val(prev_min_value); 
}); 

}）;

http://jsfiddle.net/dianaavila/2UEr6/2/

這是在FF，Chrome和IE10偉大的工作。但在IE9和8上，更新後我得到一個空列表。

謝謝你的幫助。

***更新：問題是目標對象沒有標籤，試圖找出原因。

Answer 1

我發現答案是超級簡單明顯！不知何故我的錯。

「選項」標籤沒有「標籤」屬性。大多數瀏覽器都能弄清楚，開始和結束標籤之間的文本可以作爲標籤而不是IE8和9.

因此，我只是添加了「label」屬性及其內容和ta-da ！

請參閱更新的小提琴：http://jsfiddle.net/2UEr6/4/

更新HTML

<div class="filters" id="size-filters"> 
<select id="sf-size-min" name="sf-size-min" class="price-dropdown"> 
    <option label="Space Min" selected="selected" disabled="disabled" value="none">Space Min</option> 
    <option label="0" value="0">0</option> 
    <option label="5000" value="5000">5,000</option> 
    <option label="10000" value="10000">10,000</option> 
    <option label="15000" value="15000">15,000</option> 
    <option label="20000" value="20000">20,000</option> 
    <option label="25000" value="25000">25,000</option> 
</select> 
<select id="sf-size-max" name="sf-size-max" class="price-dropdown"> 
    <option label="Space Max" selected="selected" disabled="disabled" value="none">Space Max</option> 
    <option label="0" value="0">0</option> 
    <option label="5000" value="5000">5,000</option> 
    <option label="10000" value="10000">10,000</option> 
    <option label="15000" value="15000">15,000</option> 
    <option label="20000" value="20000">20,000</option> 
    <option label="25000" value="25000">25,000</option> 
</select> 

Answer 2

它的一個簡單的事情，但不加

<DOCTYPE html> 

，因爲它告訴瀏覽器閱讀它作爲HTML的最新版本可以有這樣的效果。除此之外，沒有理由你的代碼不應該工作。 （我試過你在ie8上的指定文檔類型的代碼，它工作正常）希望這會有所幫助:)