The code below disable whole dropdownlist when select. How do i only disable and grey out certain values in the dropdownlist?
function ViewPersonalinfoBoxes(fm)
{
if (fm.PolicyType.value=="VEHICLE" || fm.PolicyType.value=="VEHICLENO")
{
alert('System not available!');
document.RegForm.PolicyType.disabled = true;
}
}
Jump to PostHow do i only disable and grey out certain values in the dropdownlist?
Think again when you put up these type of questions. Grey out is understandable but what about disabling then.
If you do not want some entries, them remove them from the dropdown list. Disabling them makes …
How do i only disable and grey out certain values in the dropdownlist?
Think again when you put up these type of questions. Grey out is understandable but what about disabling then.
If you do not want some entries, them remove them from the dropdown list. Disabling them makes no sense.
Hii...
There is some mechanism through which you can disable an option, but i dont think, that will too much satisfy your question..
Check the following link:
http://www.w3schools.com/TAGS/tag_option.asp
In order to disable some values in drop box, you can instead use AJAX... Put the select box with some deleted values in second file (may be php, html, or anyother script file) and then call the onchange event and associate a function (ajaxFunction in this case) to get the new values without reloading the page..
See the following demo:
Mainfile.html
<html>
<head>
<script type="text/javascript">
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('select_box').innerHTML = ajaxRequest.responseText;
alert(ajaxRequest.responseText);
}
}
ajaxRequest.open("GET", "myFruits.html", true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<div id="select_box">
<select name="myfruits">
<option value="apple" disabled="disabled">Apple</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
<option value="guava">Guava</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
</div>
</body>
</html>myFruits.html
<select name="myfruits">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="Kiwi">Kiwi</option>
</select>Ooops..... kindly ignore the mainfile.html in the previous post...
i forgot to include the onchange event in that...
Here is the actual one....
<html>
<head>
<script type="text/javascript">
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('select_box').innerHTML = ajaxRequest.responseText;
alert(ajaxRequest.responseText);
}
}
ajaxRequest.open("GET", "myFruits.html", true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<div id="select_box">
<select name="myfruits" onChange="javascript:ajaxFunction();">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
<option value="guava">Guava</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
</div>
</body>
</html>How do i only disable and grey out certain values in the dropdownlist?
<style>
.class {
color: grey;
}
</style>
<select name="myfruits" onchange="updateHTML(this);">
<option value="apple" class="disable">Apple</option>
<option value="orange">Orange</option>
<option value="Kiwi">Kiwi</option>
</select>Here Apple option will be in grey color.
For disabling it, you have to check manually for the entries:
function updateHTML(s) {
if(s.value=='Apple') {
//Do nothing
return;
} else {
//Do something
}
}But again why the hell you want the user to select entries which are disable. Drop down list have elements which a user can select.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.