根据在第一个选项上选择的选项值隐藏选项选择值
Posted
技术标签:
【中文标题】根据在第一个选项上选择的选项值隐藏选项选择值【英文标题】：hide option select value based on option value selected on first options 【发布时间】：2013-01-13 19:54:39 【问题描述】：我有两个选择选项字段。
<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>
如果在类型选择中选择了 Ghost，我想在升级选项下隐藏选项零售和预付。我该怎么做？我可以隐藏整个 div 容器以进行升级，但我只想隐藏最后两个选项。请提供一些帮助，我们将不胜感激。
【问题讨论】：
【参考方案1】：你可以使用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();
);
);
【讨论】：
非常感谢我选择了这个选项，因为我正在尝试学习 jquery，我实际上理解了这个 =)【参考方案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 语句以在选择“实际”时再次显示选项。
【讨论】：
非常感谢我实际上理解了你的代码（我正在学习），但我选择了 Reshil 发布的 jquery 选项 没问题，有几种不同的方法可以完成您的目标。学习和使用新东西总是很好。祝你好运:)【参考方案3】：您不能在所有浏览器中隐藏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;
【讨论】：
以上是关于根据在第一个选项上选择的选项值隐藏选项选择值的主要内容，如果未能解决你的问题，请参考以下文章