Question

I have a form with 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>

‘cenado’

    <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>

and JS function

    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");

When I choose in ‘cenaod’ ex. 4000, in ‘cenado’ i will be only options equal and larger: 4000, 5000 and 6000.

In Firefox working perfect, but in IE and Opera dont working.

Answer 1

DEMO

You cannot hide an option by setting its display to none. To not display an option you have to remove it from the dropdown.

First, I’d recommend saving all options in your cenado DD, then, when cenaod changes, clear out cenado, and re-fill it only with the options (previously saved) that are >= the new cenaod value.

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]); 
}