下拉为最小值和最大值，而不是在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上的指定文档类型的代码，它工作正常）希望这会有所帮助:)