javascript - 最小值和最大值的下拉列表，不在 EI9 和 IE8 JQuery 中更新

Question

我有这些带有数值的下拉菜单来选择最小值和最大值，当您在任一下拉菜单中选择一个值时，另一个应该更新以删除不在范围内的值，例如: 如果 min = 15,000 -> max 选项将从 15,000 开始并且不会显示 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

我发现答案 super 简单明了!不知何故我的错。

“option”标签没有“label”属性。大多数浏览器都能够识别开始和结束标签之间的文本可以作为标签，但 IE8 和 9 不能。

所以我刚刚添加了“label”属性及其内容和 ta-da!

查看更新的 fiddle :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>