2
   

JavaScript: OnSelect question

 
 
neocode
 
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.
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,268 • Replies: 2
No top replies

 
Craven de Kere
 
  1  
Reply Thu 9 Jan, 2003 02:19 pm
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
 
Craven de Kere
 
  1  
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).

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
 
 

Related Topics

 
  1. Forums
  2. » JavaScript: OnSelect question
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.75 seconds on 11/24/2024 at 07:07:49