Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations MikeeOK on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Disabling Options in a select

Status
Not open for further replies.
jl8789

jl8789

MIS
May 22, 2003
293
US
Can I have options listed in a select that are disabled, or greyed out?

I want to have them visible, but not selectable. Is that possible?
 
Sort by date Sort by votes
Do you mean sometimes or always?

If you only want sometimes, do this:

Code: 
<style type="text/css">
optgroup {
    text-decoration: none;
    font-weight: normal;
    color: gray;
}
</style>

<select name="s">
   <optgroup label="fun stuff">
      <option>value 1</option>
	  <option>value 2</option>
   </optgroup>
   <optgroup label="more fun stuff">
      <option>value 3</option>
	  <option>value 4</option>
   </optgroup>
</select>

Hope this helps.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
lol, by the statement

"if you only want sometimes"

i meant

"if you want them disabled all the time"

so, the opposite of what i said.

Add this to your style sheet as well

Code: 
<style type="text/css">
option {
    color: black;
}
</style>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
The user would still be able to select these grayed options then, right? How come the editor comes up with a disabled option for an option, can't you disable certain options in the select?
 
Upvote 0 Downvote
no, optgroups are simply labels for a set of options. they are not selectable.

yes, you can disable an option too. I wasn't sure what you wanted.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
How do I disable the option,
I tried <option disabled value="">1</option>
and <option disabled="true'>2</option>
 
Upvote 0 Downvote
the disabled keyword, which you implement like this:

Code: 
<option disabled>1</option>

Does not work in IE, but works fine in Netscape, Mozilla, FF, etc.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
That still doesn't prevent the user from selecting it. I think I'll just use an onchange event and have a value that I check for, display a message, and reset the index of the select to 0 so that they can't select the option, but are still able to see it.
 
Upvote 0 Downvote
correct, it doesn't work in IE, like i said above.

the solution you have decided to go with will work fine. You can even store the previously selected index, test to make sure they don't select a "disabled" one, and then reset it back to the original answer.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
How would I store the original value that is loaded in the dropdown, say 15 that this person is valid for? Then if they select 20 which is maybe "disabled", instead of re-setting the select back to 0, I want to set it back to 15, the original value. Know How?

Thanks!
 
Upvote 0 Downvote
Or, if I had the original value, how do I find the index where this value is in the select?
 
Upvote 0 Downvote
Knew I had this code somewhere, it just took me a few minutes to find it. Hope this helps. Note: this is a complete page example, you can copy the whole thing, paste it into a new html page to see how it works, then go from there.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

var prev_si = '';

function DoConfirm() {
    if (confirm('This order\'s status will be changed.'))
         return true;
     else
         document.forms['the_form'].elements['status1'].selectedIndex = prev_si;
     return false;
}
-->
</script>

</head>

<body>
<form name="the_form">
<select name="status1"
        onclick='prev_si = this.selectedIndex;'
        onchange="DoConfirm();">
      <option value="1">Pending</option>
      <option value="2" SELECTED>Processing</option>
      <option value="3">Delivered</option>
</select>
</form>
</body>

</html>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Do you know how I would be able to see if an index in a select was equal to a certain value?

Say I have an option that has a value of "5" only sometimes in the select. Well, I want to see if the variable prev_si is equal to that value because it would be if I first loaded the page. Here is what I am trying.

Where prev_si is being set in the select.
<select name="vac_grp" tabindex="3" onclick='prev_si = this.selectedIndex;' onchange="javascript:UnselectPollingGroup();">

var pollCard = document.empInfo.vac_grp[document.empInfo.vac_grp.prev_si].value;

if (pollCard == 'ActivePollingCard')
{
alert("This user currently has an Active Polling Card. The user cannot be moved into another group until the user is done.");
document.forms['empInfo'].elements['vac_grp'].selectedIndex = prev_si;
}


THANKS!
 
Upvote 0 Downvote
Change your JS to this:

Code: 
var s = document.empInfo.vac_grp;
var pollCard = s.options[s.selectedIndex].value;
                
if (pollCard == 'ActivePollingCard') {
    alert("This user currently has an Active Polling Card. The user cannot be moved into another group until the user is done.");
    s.selectedIndex = prev_si;
}

Does this help?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
I guess you probably misunderstood what I meant. I want to basically see if the value of the index when the screen loads is = 'ActivePollingCard' because I will only load that value in the select box when this is true. Basically if the select any other value other than that one, I want to reset the select back to the original value 'Active Polling Card' when the page loaded.

So all I really need to do is store the index when the page is loaded, and then return to that index if any other index is selected.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
944
malpa
malpa
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
559
gmmastros
gmmastros
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top