我有两个选择选项字段。
<div style="float:left; width:7%">
<label>Type</label>
<select name="ostatus" id="ostatus" class="input-small">
<option value="Actual">Actual</option>
<option value="Ghost">Ghost</option>
</select>
<div style="float:left; width:7%">
<label>Upgrade</label>
<select name="oupg" id="oupg" class="input-small">
<option value="Exp" >Exp</option>
<option value="Post" >Post</option>
<option value="Upgrade" >Upg</option>
<option value="Retail" >Retail</option>
<option value="Prepaid" >Prepaid</option>
</select>
如果在Type select上选择了Ghost,我想隐藏升级选项下的Retail和Prepaid选项。我该怎么做?我可以隐藏整个div容器进行升级,但我只想隐藏最后两个选项。请一些帮助表示赞赏。
答案 0 :(得分:2)
使用Javascript和display:none
css样式,您可以完成此任务:
<head>
<script type="text/javascript">
function hideOpt() {
var type = document.getElementById("ostatus");
var upgrade = document.getElementById("oupg");
if (type.options[type.selectedIndex].value == 'Ghost') {
upgrade.options[3].style.display = 'none';
upgrade.options[4].style.display = 'none';
// IE exception
upgrade.options[3].disabled = true;
upgrade.options[4].disabled = true;
} else {
upgrade.options[3].style.display = 'block';
upgrade.options[4].style.display = 'block';
// IE exception
upgrade.options[3].disabled = false;
upgrade.options[4].disabled = false;
}
}
</script>
</head>
<label>Type</label>
<select name="ostatus" id="ostatus" onchange="return hideOpt();" class="input-small">
<option value="Actual">Actual</option>
<option value="Ghost">Ghost</option>
</select>
<label>Upgrade</label>
<select name="oupg" id="oupg" class="input-small">
<option value="Exp" >Exp</option>
<option value="Post" >Post</option>
<option value="Upgrade" >Upg</option>
<option value="Retail" >Retail</option>
<option value="Prepaid" >Prepaid</option>
</select>
修改强>
添加else
语句,以便在选择“实际”时再次显示选项。
答案 1 :(得分:2)
您可以使用jquery
$(document).ready(function(){
$('#ostatus').on('change',function() {
if($(this).val()== 'Ghost'){
$('#oupg') .find ("option[value=Retail]").hide();
$('#oupg') .find ("option[value=Prepaid]").hide();
}
else{
$('#oupg') .find ("option[value=Retail]").show();
$('#oupg') .find ("option[value=Prepaid]").show();
}
});
});
答案 2 :(得分:0)
您无法在所有浏览器中隐藏option
个元素,但可以禁用它们:
document.querySelector("#oupg option[value=Retail]").disabled = true;
document.querySelector("#oupg option[value=Prepaid]").disabled = true;
这适用于IE8及以上版本。
如果你想要IE7和更低的支持,那么:
var opts = document.getElementById("oupg").options;
opts[opts.length - 2].disabled = true;
opts[opts.length - 1].disabled = true;