Solved

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

Posted on 2003-11-19
10
5,489 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now