Solved

Can an <option>  tag be dynamically modified?

Posted on 1999-01-21
6
192 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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 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 50 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

829 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