[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Can an <option>  tag be dynamically modified?

Posted on 1999-01-21
6
Medium Priority
?
219 Views
Last Modified: 2010-04-09
Can the following be done:
An html page contains radio buttons and an option tag (combo box).  If you click one of the radio buttons, a javascript is called that will modify the content (the pulldown options) in the option tag dynamically without reloading a new page.  Can it be done? if so, what is the code (in JVScript or html) that will modify the content of the option dynamically.
0
Comment
Question by:matala
6 Comments
 
LVL 6

Expert Comment

by:PBall
ID: 1845580
Yes, but it might not work on some older browsers like IE3 (I think)

<select name=selAnswers>
<option value='a'>16 meters
<option value='b'>12 meters
<option value='c'>14 meters
<option value='d'>other

<script>
document.selAnswer.options[0] = new Option('a','New York')
document.selAnswer.options[1] = new Option('b','Chicago')
document.selAnswer.options[2] = new Option('c','Dallas')
document.selAnswer.options[3] = new Option('c','San Francisco')
</script>

Hmm..I forgot how to delete the previous options tho, hmm...
anyone?
0
 
LVL 4

Expert Comment

by:martinag
ID: 1845581
The list has got to be filled with x empty options where x is the number of options that will ever be used.
Then, you dynamically assign text and value
<SELECT>
<OPTION>
<OPTION>
<OPTION>
</SELECT>
[...]
// A list
list.options[0].value = "soccer";
list.options[0].text = "Soccer";
list.options[1].value = "basketball";
list.options[1].text = "BasketBall;
list.options[2].value = "hockey";
list.options[3].text = "Hockey";
[...]
// Another list
list.options[0].value = "y";
list.options[0].text = "Yes";
list.options[1].value = "n";
list.options[1].text = "No";
list.options[2].value = ""; // Empty, or it will be "hockey"
list.options[3].text = ""; // Empty, or it will be "Hockey"

Martin
0
 
LVL 4

Expert Comment

by:martinag
ID: 1845582
When you do like PBall suggests you have to reload for the changes to be made.

Martin
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Expert Comment

by:martinag
ID: 1845583
Oops.
  list.options[2].value = ...
  list.options[3].text = ...
should of course be
  list.options[2].value = ..
  list.options[2].text = ...

Martin
0
 

Author Comment

by:matala
ID: 1845584
Thanks, it works with netscape, but not with iexplorer.  How can I make it work in both.
The error in iexplorer 4.0 is "...options is not an object"
0
 
LVL 11

Accepted Solution

by:
mouatts earned 150 total points
ID: 1845585
Firstly it should  option not options.
Secondly to remove all element from the list you can use option.length=0
Thus you only need to put the options that need to be there and don't need 'empty' ones to fill the gaps.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

872 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