Solved

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

Posted on 2003-11-19
10
5,527 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

856 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