SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple color select options

    I want to create a select box that changes colors depending on the option that is selected. Here is what I have made so far.

    Code:
    <select name="lg" id="lg">
    <option value="green" onChange="javascript: lg.style.background='green';">Green</option>
    <option value="yellow" onChange="javascript: lg.style.background='yellow';">Yellow</option>
    <option value="red" onChange="javascript: lg.style.background='red';">Red</option>
    </select>
    But it doesn't work. I'm not so good with Javascript, I'm more of a server side programmer...

    Thanks for any help!

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try

    PHP Code:
    <select name="lg" id="lg" style='background:green' onChange="javascript:this.style.background=this.value;">
    <
    option value="green" selected>Green</option>
    <
    option value="yellow">Yellow</option>
    <
    option value="red">Red</option>
    </
    select
    Last edited by Andrew-J2000; Mar 21, 2002 at 02:18.

  3. #3
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might be better off with this depending how you want it

    PHP Code:
    <select name="lg" id="lg" onfocus='javascript:this.style.background=this.value;' onChange='javascript:this.style.background=this.value;'>
    <
    option value="green" selected>Green</option>
    <
    option value="yellow">Yellow</option>
    <
    option value="red">Red</option>
    </
    select

  4. #4
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, that works perfectly. One more thing, what event would I use to make the box the color of the default selected option?

    Thanks for the help so far!

    [Z]
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is just using css, not javascript
    PHP Code:
    <select name="lg" id="lg" style="background:orange;" onChange='javascript:this.style.background=this.value;'>
    <
    option value="green" selected>Green</option>
    <
    option value="yellow">Yellow</option>
    <
    option value="red">Red</option>
    </
    select
    that what you mean?

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol I broke sitepoint ignore the above the forum messed up.

    heres the code again

    PHP Code:
    <select name="lg" id="lg" style="background:orange;" onChange='javascript:this.style.background=this.value;'>
    <
    option value="green" selected>Green</option>
    <
    option value="yellow">Yellow</option>
    <
    option value="red">Red</option>
    </
    select
    I forgott to disable smilies:hehe
    Last edited by Andrew-J2000; Mar 21, 2002 at 02:41.


Bookmarks

Posting Permissions

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