JavaScript: OnSelect question

Forums: Javascript, Web Development, Onselect
Email this Topic • Print this Page

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.
http://verticalinsanity.com/ws/states2.html
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!)

NeoCode

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 2 • Views: 48,264 • Replies: 2

No top replies

Tricky!

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.

Code:

<HEAD>



<style>

	#sub1, #sub2, #sub3

	{ position: absolute;

	  left: 480px;

	  visibility: hidden;

	  z-index: 3

	}

</style>



<SCRIPT LANGUAGE="JavaScript">



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

      cat.focus()

      } else {

      openselect(letsopen)

      lock()

    }

  }

}

//  End -->

</script>



</HEAD>

<BODY>



<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

  </select>

</span>

<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

  </select>

</span>

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

</span>

  <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

  </select><br>

<input type="text" name="subcategory" readonly="readonly" value="- subcategory -">

</div>

0 Replies

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).

Code:



<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var africaArray =  new Array("('Select country','',true,true)",

"('Ethiopia')",

"('Somalia')",

"('South Africa')",

"('Other')");

var middleeastArray =  new Array("('Select country','',true,true)",

"('Egypt')",

"('Iran')",

"('Israel')",

"('Kuwait')",

"('Lebanon')",

"('Morocco')",

"('Saudi Arabia')",

"('Syria')",

"('Turkey')",

"('U. A. Emirates')",

"('Other')");

var asiaArray =  new Array("('Select country','',true,true)",

"('Armenia')",

"('Bangladesh')",

"('Cambodia')",

"('China')",

"('India')",

"('Indonesia')",

"('Japan')",

"('Malaysia')",

"('Myanmar')",

"('Nepal')",

"('Pakistan')",

"('Philippines')",

"('Singapore')",

"('South Korea')",

"('Sri Lanka')",

"('Taiwan')",

"('Thailand')",

"('Uzbekistan')",

"('Vietnam')",

"('Other')");

var europeArray =  new Array("('Select country','',true,true)",

"('Albania')",

"('Austria')",

"('Belarus')",

"('Belgium')",

"('Bosnia')",

"('Bulgaria')",

"('Croatia')",

"('Cyprus')",

"('Czech Rep.')",

"('Denmark')",

"('Estonia')",

"('Finland')",

"('France')",

"('Germany')",

"('Greece')",

"('Hungary')",

"('Iceland')",

"('Ireland')",

"('Italy')",

"('Latvia')",

"('Liechtenstein')",

"('Lithuania')",

"('Luxembourg')",

"('Macedonia')",

"('Malta')",

"('Monaco')",

"('Netherlands')",

"('Norway')",

"('Poland')",

"('Portugal')",

"('Romania')",

"('Russia')",

"('Slovakia')",

"('Slovenia')",

"('Spain')",

"('Sweden')",

"('Switzerland')",

"('Ukraine')",

"('United Kingdom')",

"('Other')");

var australiaArray =  new Array("('Select country','',true,true)",

"('Australia')",

"('New Zealand')",

"('Other')");

var lamericaArray =  new Array("('Select country','',true,true)",

"('Costa Rica')",

"('Cuba')",

"('El Salvador')",

"('Guatemala')",

"('Haiti')",

"('Jamaica')",

"('Mexico')",

"('Panama')",

"('Other')");

var namericaArray =  new Array("('Select country','',true,true)",

"('Canada')",

"('USA')",

"('Other')");

var samericaArray =  new Array("('Select country','',true,true)",

"('Argentina')",

"('Bolivia')",

"('Brazil')",

"('Chile')",

"('Colombia')",

"('Ecuador')",

"('Paraguay')",

"('Peru')",

"('Suriname')",

"('Uruguay')",

"('Venezuela')",

"('Other')");

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) {

window.history.go(0);

}

else {   	

if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {

window.history.go(0);

            }

         }

      }

   }

}

function populateUSstate(inForm,selected) {  

var stateArray =  new Array("('Select State','',true,true)",

"('Alabama')",

"('Alaska')",

"('Arizona')",

"('Arkansas')",

"('California')",

"('Colorado')",

"('Connecticut')",

"('Delaware')",

"('Columbia')",

"('Florida')",

"('Georgia')",

"('Hawaii')",

"('Idaho')",

"('Illinois')",

"('Indiana')",

"('Iowa')",

"('Kansas')",

"('Kentucky')",

"('Louisiana')",

"('Maine')",

"('Maryland')",

"('Massachusetts')",

"('Michigan')",

"('Minnesota')",

"('Mississippi')",

"('Missouri')",

"('Montana')",

"('Nebraska')",

"('Nevada')",

"('New Hampshire')",

"('New Jersey')",

"('New Mexico')",

"('New York')",

"('North Carolina')",

"('North Dakota')",

"('Ohio')",

"('Oklahoma')",

"('Oregon')",

"('Pennsylvania')",

"('Rhode Island')",

"('South Carolina')",

"('South Dakota')",

"('Tennessee')",

"('Texas')",

"('Utah')",

"('Vermont')",

"('Virginia')",

"('Washington')",

"('West Virginia')",

"('Wisconsin')",

"('Wyoming')");

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) {

window.history.go(0)

}

else {    	

if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {

window.history.go(0)

         }

      }

   }

}

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

</script>

</head>



<BODY>



<center>

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

<select name="country" onChange="populateUSstate(document.globe,document.globe.country.options[document.globe.country.selectedIndex].text)">

<option value=''><--------------------</option>

</select>

</form>

</center>

0 Replies

JavaScript: OnSelect question

Related Topics

Quick Links

My Account

able2know