JavaScript: OnSelect question

Reply Thu 9 Jan, 2003 12:08 pm
Hello Folks,

I have a question about JS. I am trying to achieve the following.

I have a <select> list with 4 options, A B C and D. Lets call it List1. I have a second, List2, whose values depend on List1.

Now whenever user chooses A, B or C from List1, the options in the List2 changes. I got this part working.
Option D in list1 is for the user to enter their own values if their choice is not in the list. So somehow when the user selects option D, i want them to be able to enter whatever they want in a text field.
Is there a way to write a function that whenever the user selects option D, the list box changes to a text box? Is there any other way to accomplish that?

Thanks a million to whoever helps me out and may God fulfill your wish of sleeping with Elle Mcphearson (ok, thats my dream!)

  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Discussion • Score: 2 • Views: 48,138 • Replies: 2
No top replies

Craven de Kere
Reply Thu 9 Jan, 2003 02:19 pm

Ok, first of all I think you probably want your current code altered to achieve this and this is where I disappoint you. I don't really have the time to hand you the code ready to go so I'll just try to leave you closer.

Note: many of these scripts don't degrade gracefully in some browsers BTW.

So here I'll give you code that I think you'll be able to alter to fit your needs:

This one populates the seccond selects with an array, but it doesn't display until the first select is chosen, then it displays the final choice in a text area. If you change the text area from read only to a normal text area then a value can be entered. Then you add "other" options in the select array and then make that print "enter your blah blah.." in the text area box.


#sub1, #sub2, #sub3
{ position: absolute;
left: 480px;
visibility: hidden;
z-index: 3


<!-- Begin
catnumber = 3
offset = 150
performOnchange = false
if (document.all) {
docObj = "document.all."
styleObj = ".style"
} else {
docObj = "document."
styleObj = ""
function openselect(subcat) {
popupselect = eval(docObj + subcat + styleObj)
popupselect.visibility = "visible"
function closeselect(submenu,subcat){
popupselect = eval(docObj + subcat + styleObj)
if (submenu.selectedIndex != 0) {
popupselect.visibility = "hidden"
numchoice = submenu.selectedIndex
choice = submenu[numchoice].value
subcategory.value = choice
submenu.selectedIndex = 0
function lock() {
performOnchange = false
function unlock() {
performOnchange = true
function selectSub(cat) {
for (i=1; i <= catnumber; i++) {
subcat = "sub" + i
popupselect = eval(docObj + subcat + styleObj)
popupselect.visibility = "hidden"
if (performOnchange == true) {
letsopen = "sub" + cat.selectedIndex
if (letsopen == "sub0") {
alert("No category selected")
choice = "- subcategory -"
subcategory.value = choice
} else {
// End -->


<div align="center">
<span id="sub1">
<select name="subannounce" onchange="closeselect(this,'sub1')">
<option selected value="">- subcategory -
<option value="cars">cars
<option value="houses">houses
<option value="guitars">guitars
<span id="sub2">
<select name="subarts" onchange="closeselect(this,'sub2')">
<option selected value="">- subcategory -
<option value="music">music
<option value="lyrics">lyrics
<option value="painting">painting
<span id="sub3">
<select name="subsoftware" onchange="closeselect(this,'sub3')">
<option selected value="">- subcategory -
<option value="php">php
<option value="java">java
<option value="asp">asp
<option value="mysql">mysql
<select name="categoria" onmouseover="unlock()" onchange="selectSub(this)">
<option selected value="">-- choose category --
<option value="announce">Announce
<option value="arts">Arts
<option value="software">Software
<input type="text" name="subcategory" readonly="readonly" value="- subcategory -">
0 Replies
Craven de Kere
Reply Thu 9 Jan, 2003 02:24 pm
This one already has what you want, but it uses an alert for input (your original code could do that easily BTW). Select other (after choosing a continent) and it will give you an alert that allows you to write in a select option (not a text area, I think thisa is better than the text option).

<!-- Begin
var africaArray = new Array("('Select country','',true,true)",
"('South Africa')",
var middleeastArray = new Array("('Select country','',true,true)",
"('Saudi Arabia')",
"('U. A. Emirates')",
var asiaArray = new Array("('Select country','',true,true)",
"('South Korea')",
"('Sri Lanka')",
var europeArray = new Array("('Select country','',true,true)",
"('Czech Rep.')",
"('United Kingdom')",
var australiaArray = new Array("('Select country','',true,true)",
"('New Zealand')",
var lamericaArray = new Array("('Select country','',true,true)",
"('Costa Rica')",
"('El Salvador')",
var namericaArray = new Array("('Select country','',true,true)",
var samericaArray = new Array("('Select country','',true,true)",
function populateCountry(inForm,selected) {
var selectedArray = eval(selected + "Array");
while (selectedArray.length < inForm.country.options.length) {
inForm.country.options[(inForm.country.options.length - 1)] = null;
for (var i=0; i < selectedArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + selectedArray[i]);
if (inForm.region.options[0].value == '') {
inForm.region.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
function populateUSstate(inForm,selected) {
var stateArray = new Array("('Select State','',true,true)",
"('New Hampshire')",
"('New Jersey')",
"('New Mexico')",
"('New York')",
"('North Carolina')",
"('North Dakota')",
"('Rhode Island')",
"('South Carolina')",
"('South Dakota')",
"('West Virginia')",
if (selected == 'USA') {
for (var i=0; i < stateArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + stateArray[i]);
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
else {
if (selected == 'Other') {
newCountry = "";
while (newCountry == ""){
newCountry=prompt ("Please enter the name of your country.", "");
if (newCountry != null) {
inForm.country.options[(inForm.country.options.length-1)]=new Option(newCountry,newCountry,true,true);
inForm.country.options[inForm.country.options.length]=new Option('Other, not listed','Other');
if(inForm.country.options[0].text == 'Select country') {
inForm.country.options[0]= null;
// End -->


<form name="globe">
<select name="region" onChange="populateCountry(document.globe,document.globe.region.options[document.globe.region.selectedIndex].value)">
<option selected value=''>Select Region</option>
<option value='asia'>Asia</option>
<option value='africa'>Africa</option>
<option value='australia'>Australia</option>
<option value='europe'>Europe</option>
<option value='middleeast'>Middle East</option>
<option value='lamerica'>Latin America</option>
<option value='namerica'>North America</option>
<option value='samerica'>South America</option>
<select name="country" onChange="populateUSstate(document.globe,document.globe.country.options[document.globe.country.selectedIndex].text)">
<option value=''><--------------------</option>
0 Replies

Related Topics

  1. Forums
  2. » JavaScript: OnSelect question
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 05/21/2024 at 07:45:31