我有一个带有 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 中不工作。
最佳答案
您不能通过将显示设置为无来隐藏选项。要不显示选项,您必须将其从下拉列表中删除。
首先,我建议将所有选项保存在您的 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]);
}
关于JavaScript 与 Form Select 的关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8886008/