下拉的最小和最大值，不更新在EI9和IE8的JQuery

Dropdown for min and max values, not updating in EI9 and IE8 JQuery

本文关键字：更新 IE8 JQuery EI9 最大值      更新时间：2023-09-26

我有这些下拉菜单的数值来选择一个最小值和一个最大值，当你选择一个值在任何一个下拉菜单，另一个应该更新以删除不在范围内的值，例如:如果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和ie8上，更新后我得到一个空列表。

谢谢你的帮助。

***更新:问题是目标对象没有标签，试图找出原因。

我发现答案非常简单和明显!我的错。

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

所以我只是添加了"label"属性和它的内容。

查看更新后的提琴: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>

这是一个简单的事情，但不添加

<DOCTYPE html>

可以有这种效果，因为它告诉浏览器将其读取为最新版本的html。除此之外，没有理由你的代码不应该工作。(我试过你的代码在ie8与指定的doctype，它工作得很好)希望这有助于:)

相关文章：