Hide Option Select Value Based On Option Value Selected On First Options
I have two select option field.
Solution 1:
You can use 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();
}
});
});
Solution 2:
Using Javascript and display:none css styling you can accomplish this:
<head><scripttype="text/javascript">functionhideOpt() {
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><selectname="ostatus"id="ostatus"onchange="return hideOpt();"class="input-small"><optionvalue="Actual">Actual</option><optionvalue="Ghost">Ghost</option></select><label>Upgrade</label><selectname="oupg"id="oupg"class="input-small"><optionvalue="Exp" >Exp</option><optionvalue="Post" >Post</option><optionvalue="Upgrade" >Upg</option><optionvalue="Retail" >Retail</option><optionvalue="Prepaid" >Prepaid</option></select>Edit:
Added else statement to show the options again when 'Actual' is selected.
Solution 3:
You can't hide option elements in all browsers, but you can disable them:
document.querySelector("#oupg option[value=Retail]").disabled = true;
document.querySelector("#oupg option[value=Prepaid]").disabled = true;
This will work in IE8 and up.
If you want IE7 and lower support, then:
var opts = document.getElementById("oupg").options;
opts[opts.length - 2].disabled = true;
opts[opts.length - 1].disabled = true;
Post a Comment for "Hide Option Select Value Based On Option Value Selected On First Options"