Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 5th, 2005, 09:44 PM
Authorized User
 
Join Date: Jul 2004
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

 
Old January 5th, 2005, 10:28 PM
Friend of Wrox
 
Join Date: Nov 2003
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?
 
Old October 18th, 2007, 02:20 PM
Registered User
 
Join Date: Oct 2007
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.


 
Old October 30th, 2007, 12:01 PM
Registered User
 
Join Date: Oct 2007
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.







Similar Threads
Thread Thread Starter Forum Replies Last Post
dynamically changing css sarah lee ASP.NET 2.0 Basics 0 January 25th, 2007 10:06 AM
dynamically changing CSS sarah lee CSS Cascading Style Sheets 1 January 25th, 2007 06: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 03:28 PM
Changing Menu made with VB 4 Menu Editor Zooker VB How-To 1 July 26th, 2003 11:44 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.