Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change 1 selected item from dropdownbox <select...>

    Hello all,

    I am having a problem, and since I am quite new in the Javascript code I hope somebody can help me here.
    This is my current code:

    Code:
    <select class="Form" name="opties">
    <option value="AAA">AAA</option>
    <option value="BBB">BBB</option>
    <option value="SLX" selected>Selecteer optie</option>
    </select>
    Now my intention is the following: When the option with value SLX gets selected it needs to get a special css style. It is not a problem to give the option this style in the list itself, but once selected it always changes to the original style (standard font and color) in Chrome and Mozilla.

    Now I searched on the net and sometimes I find things like this:
    Code:
    function displayOption(divName)
    {
     document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
    }
    
    <select class="Form" name="opties" onChange="displayOption('div1');">
    <option value="AAA">AAA</option>
    <option value="BBB">BBB</option>
    <option value="SLX" selected>Selecteer optie</option>
    </select>
    But I suppose this always changes the style of the selected item? It only needs to change when the option SLX is chosen...

    Anyone knows how to solve this problem?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    innerText isn't supported in all browsers, in any case.

    And there are only two style changes in <option>s that work in all browsers, so far as I know: color and backgroundColor.

    But how about something like this:
    Code:
    <html>
    <body>
    <form>
    <select style="color: green;" onchange="this.style.color=this.options[this.selectedIndex].style.color;">
    <option value="AAA" style="color: red;">AAA</option>
    <option value="BBB" style="color: blue;">BBB</option>
    <option value="SLX" selected style="color: green;">Selecteer optie</option>
    </select>
    </form>
    </body>
    </html>
    Kind of a hack, but it works in MSIE and FF, at least.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry for the late reply but, thanks, hero


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •