JavaScript 与 Form Select 的关系

Question

我有一个带有 2x Select 的表单。

'cenaod'

<select class="form" name="cenaod" id="cenaod"> 
    <option value="0">Dowolna</option> 
    <option value="1000">1000</option> 
    <option value="2000">2000</option> 
    <option value="3000">3000</option> 
    <option value="4000">4000</option> 
    <option value="5000">5000</option> 
    <option value="6000">6000</option>
</select>

'塞纳多'

    <select class="form" name="cenado" id="cenado"> 
    <option value="0">Dowolna</option> 
    <option value="1000">1000</option> 
    <option value="2000">2000</option> 
    <option value="3000">3000</option> 
    <option value="4000">4000</option> 
    <option value="5000">5000</option> 
    <option value="6000">6000</option>
</select>

和JS函数

    function formPola(jeden,dwa)
{
    document.getElementById(jeden).onchange = function(){
    var opt,pole,i;
    opt = document.getElementById(dwa).getElementsByTagName('option');
    for( i=0; pole = opt[i]; i++){
    pole.style.display="";
    if(i < this.selectedIndex)
    pole.style.display="none";
    }
    }
}
formPola("cenaod","cenado");

当我在“cenaod”中选择时。 4000，在“cenado”中，我将只有相等和更大的选项:4000、5000 和 6000。

在 Firefox 中工作完美，但在 IE 和 Opera 中不工作。

Answer 1

DEMO

您不能通过将显示设置为无来隐藏选项。要不显示选项，您必须将其从下拉列表中删除。

首先，我建议将所有选项保存在您的 cenaod DD 中，然后，当 cenaod 更改时，清除 cenado，并仅使用 >= 新 cenaod 值的选项(先前保存的)重新填充它。

var cenado = document.getElementById("cenado");
var cenadoOptions = [];
for (var i = 0, len = cenado.options.length; i < len; i++)
    cenadoOptions.push(cenado.options[i]);

var cenaod = document.getElementById("cenaod");
cenaod.onchange = function() {
    var val = +cenaod.value;
    cenado.options.length = 0;
    for (var i = 0; i < cenadoOptions.length; i++)
       if (+cenadoOptions[i].value >= val)
           cenado.options.add(cenadoOptions[i]); 
}