?
Solved

How to make javascript select an option in a select (dropdown) list.

Posted on 2003-11-19
10
Medium Priority
?
5,565 Views
Last Modified: 2012-05-04
In an HTML form, I have a select (dropdown) list named TimeZone. It contains, as you might imagine, options such as "Pacific Time," "Mountain Time," etc.

Under certain conditions, the correct time zone will be contained in a variable. How can I make javascript use the variable to make the correct selection from the dropdown list?  

Thanks!

Kathryn
0
Comment
Question by:KathrynGZ
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
10 Comments
 
LVL 18

Expert Comment

by:bobbit31
ID: 9783037
for (i=0;i<yourSelectBox.options.length;i++) {
   if (yourSelectBox.options[i].value == TimeZoneVariable) {
      yourSelectBox.options[i].selectedIndex = i;
      break;
   }
}
0
 

Author Comment

by:KathrynGZ
ID: 9783226
Thanks, bobbit31, but I couldn't get it to work.

Here's the code for my dropdown box:

<select name="TimeZone">
          <option selected>--Select one--</option>
          <option>Pacific Time</option>
          <option>Arizona Time</option>
          <option>Mountain Time</option>
          <option>Central Time</option>
          <option>Eastern Time</option>
          <option>Alaska Time</option>
          <option>Hawaii Time</option>
          </select>


And here's the relevant js code:

nextNode = nextNode.nextSibling  //I'm pulling the existing time zone from an XML file
TimeZoneOption = nextNode.text  //var holding time zone from XML tree
alert(TimeZoneOption)                 //I did this as a test to make sure the variable contained the
                                                    correct time zone, and it did.

//below is your code, adapted for my page

for (i=0;i<document.FrontPage_Form2.TimeZone.options.length;i++) {
    if (document.FrontPage_Form2.TimeZone.options[i].value == TimeZoneOption) {
        document.FrontPage_Form2.TimeZone.options[i].selectedIndex = i;
        break;
     }
}

But after the script is run, the dropdown box stays on the first option, "--Select One--"

Any ideas?

Thanks--

Kathryn
0
 
LVL 18

Expert Comment

by:bobbit31
ID: 9783242
you have to assign a value to each of the options ;)

<select name="TimeZone">
          <option selected>--Select one--</option>
          <option value="Pacific Time">Pacific Time</option>
          <option value="Arizona Time">Arizona Time</option>
          etc...
</select>
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 25

Expert Comment

by:James Rodgers
ID: 9783661
this will do it based on the text

for (i=0;i<yourSelectBox.options.length;i++) {
   if (yourSelectBox.options[i].text == TimeZoneVariable) {
      yourSelectBox.options[i].selectedIndex = i;
      break;
   }
}


but you really should have some value for each selection, other wise you will have nothing to pass in a form

eg

<select name="TimeZone">
          <option selected>--Select one--</option>
          ...
          <option value="GMT-5">Eastern Time</option> or <option value="ET">Eastern Time</option>
           ...
          </select>
0
 

Author Comment

by:KathrynGZ
ID: 9783668
LOL! Yes, that makes perfect sense, and I made the correction ... but it didn't solve the problem! I'm stumped, because your code looks to me like it should work. Do you think the spaces in the values are causing problems? Is it a screen refresh problem?

My js book says options can be set by setting Option.selected to true. I also tried that--i.e.,

document.FrontPage_Form2.TimeZone.TimeZoneOption.selected = true

but it tells me it's null or not an object.

I'm teaching myself js, and obviously I've got a lot to learn, but maybe the above will give you an idea...

I increased the points. I thought it was going to be easier than it's turning out to be.

Thanks again--

Kathryn

0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9783682
document.FrontPage_Form2.TimeZone.TimeZoneOption.options[x].selected = true

where x is the index of the item to select
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9783689
what is the varaible that could possible hold the timezone, how is it formatted
is it a number

text

a code?
0
 

Accepted Solution

by:
KathrynGZ earned 0 total points
ID: 9783882
Aha--I just tried

for (i=0;i<document.FrontPage_Form2.TimeZone.options.length;i++) {
  if (document.FrontPage_Form2.TimeZone.options[i].value == TimeZoneOption) {
  document.FrontPage_Form2.TimeZone.options[i].selected = true;
  break;
  }
}

And it works.

Thanks to both of you--I used elements from both your suggestions.

Does an 80/20 split sound okay? bobbit31, I used your script except for one line. Jester_48, I used one line from you, with a slight modification to get it to work.

It may have also made a difference to take the spaces out of the option values.

Thanks again!

Kathryn
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9783900
glad you got it working

however you want to handle it
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question