Improve company productivity with a Business Account.Sign Up

x
?
Solved

Can an <option>  tag be dynamically modified?

Posted on 1999-01-21
6
Medium Priority
?
222 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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)

607 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