Deselecting an option

Discussion in 'HTML & Website Design' started by Jamie18, Jul 27, 2007.

  1. #1
    Not sure if this should be in here or javascript but i'm betting someone might know what to do.

    I've got a select menu something like the following

    
    <select name="somename" size="somelength" multiple>
      <option id="opt1" value="1" disabled>1
      <option id="opt2" value="2">2
      <option id="opt3" value="3" disabled>3
      ....
    </select>
    
    Code (markup):
    microsoft being the leaders of technology that they are won't allow me to use the disabled option in IE6 at least..

    so i'm trying to give the disabled affect anyways..

    to each option i've added a style="color: #999999"

    which is all i care about for the look, but what i need to do is find a way to not allow the options to be selected.

    i've tried things along the lines of onclick/onfocus/onchange="window.focus(); this.blur();" but haven't been working. i've also tried sending their id's to a javascript function..

    onfocus="somefunction(this.id);"

    
    <script type.....>
      function somefunction(id)
      {
         document.getElementById(id).selected=false;
         OR
         document.getElementById(id).blur();
      }
    </script>
    
    Code (markup):
    so far i haven't found anything that seems to work..

    any ideas?
     
    Jamie18, Jul 27, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Are you closing your OPTION tags, using a complete and proper DOCTYPE declaration, and if so, which one?
     
    Dan Schulz, Jul 27, 2007 IP
  3. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yes, the option are actually closed, sorry.

    this is the doctype declaration that seems to be related to the page i'm looking at
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
     
    Jamie18, Jul 27, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hmm... Internet Explorer shouldn't be having a problem then.

    Can you post a link to your page (even if the page is just an otherwise verbatim copy of the real page but with placeholder content)? (Bear in mind I may not get back to you tonight, since I have errands to run, bills to pay and work to do, but if I don't get back to you today, I'll do my best to make sure I do tomorrow.)
     
    Dan Schulz, Jul 27, 2007 IP
  5. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    unfortunately it's content i can't actually give out for security reasons.

    but if anyone could try creating there own select menu with disabled options and tell me if the options actually disable for them in IE 6 it would be a big help.

    here's some code, any reason why the options don't appear disabled in IE 6 for me?

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Select Menu Bod</title>
    </head>
    
    <body>
    
    <select multiple size="5">
    	<option value="1" disabled>Value1</option>
    	<option value="2" >Value2</option>
    	<option value="3" disabled>Value3</option>
    	<option value="4" >Value4</option>
    	<option value="5" disabled>Value5</option>
    </select>
    
    
    </body>
    </html>
    
    Code (markup):
     
    Jamie18, Jul 30, 2007 IP
  6. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Just found an answer to my problem, thought i'd post it for anyone else who is interested.

    simply replace all the options you want disabled with optgroups

    i.e.
    
    <option value="someval" disabled>X</option>
    can be replaced with
    <optgroup label="X"></optgroup>
    
    Code (markup):
    optgroups are not selectable therefor you just need to add some css to give them the disabled appearance.

    unfortunately this solution wouldn't be the best for a more dynamic select where options are enabled and disabled but if you want to make an option that is always going to be disabled as i do, this will work fine
     
    Jamie18, Jul 30, 2007 IP