Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old January 5th, 2005, 08:44 PM
Authorized User
 
Join Date: Jul 2004
Location: , , .
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default changing drop down menu value dynamically

I was wondering how I can change the selected item in a drop down menu, from an onmouseover event somewere else on the page. I want when a user scrolls over various color swatches the selected menu item will change to that color...How would I go about doing this....

Elladi

Reply With Quote
  #2 (permalink)  
Old January 5th, 2005, 09:28 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Include this function in your page:

function changeDropDownValue(val, dropdown)
{
  for(var i=0;i<dropdown.options.length;i++)
  {
    if(dropdown.options[0].value = val)
    {
      dropdown.selectedIndex = i;
      return true;
    }
  }
  return false;
}

Make your color palette like this:

<style type='text/css'>
td {width:10px;height:10px;font-size:10px;}
</style>
<table>
 <tr>
  <td style='background-color:#FF0000' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
  <td style='background-color:#00FF00' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
  <td style='background-color:#0000FF' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
 </tr>
</table>

And then your select box like so:

<select id='sel'>
 <option value='#FF0000'>red</option>
 <option value='#00FF00'>green</option>
 <option value='#0000FF'>blue</option>
</select>

Add the colors you need following suit, and this should work as you described.

-Snib - http://www.snibworks.com
Where will you be in 100 years?
Reply With Quote
  #3 (permalink)  
Old October 18th, 2007, 02:20 PM
Registered User
Points: 12, Level: 1
Points: 12, Level: 1 Points: 12, Level: 1 Points: 12, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2007
Location: , VA, USA.
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

That code won't work as posted - needs another ")" (without quotes) on the ends of those changeDropDown calls - at the end of ("sel"), but before the last single quote. Otherwise, it looks like it's taking the "this.backgroundcolor" of the area "mouse-overed" and inputting that as the value the select box should show. Nicely done.


Reply With Quote
  #4 (permalink)  
Old October 30th, 2007, 12:01 PM
Registered User
 
Join Date: Oct 2007
Location: Richmond, VA, USA.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Where does that function code go? In the header? When I put it in the header, I get the colors on top of the dropdown menu instead of inside the dropdown menu. How do I get it inside?

Quote:
quote:Originally posted by navyjax2
 That code won't work as posted - needs another ")" (without quotes) on the ends of those changeDropDown calls - at the end of ("sel"), but before the last single quote. Otherwise, it looks like it's taking the "this.backgroundcolor" of the area "mouse-overed" and inputting that as the value the select box should show. Nicely done.


Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
dynamically changing css sarah lee ASP.NET 2.0 Basics 0 January 25th, 2007 09:06 AM
dynamically changing CSS sarah lee CSS Cascading Style Sheets 1 January 25th, 2007 05:14 AM
changing drop down menu kanoorani Javascript How-To 1 September 10th, 2005 04:21 AM
right click menu hidden by drop-drown menu Andraw HTML Code Clinic 0 March 18th, 2005 02:28 PM
Changing Menu made with VB 4 Menu Editor Zooker VB How-To 1 July 26th, 2003 11:44 PM



All times are GMT -4. The time now is 03:11 PM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.