PDA

View Full Version : Multiple Dynamic Combo Boxes



mjohnson24
05-19-2009, 09:09 PM
I downloaded this javascript for linking multiple dropdown list boxes. But i would like to change combo box 3 and 4 to text fields or just remove combo box 4 and jsut use 3 boxes, the 3rd one being a text field. The reason why is if i choose something in box 1 then box 2 changes to things related to whats selected in box 1. Whats chosen in box 2 sets box 3 text field to specific text that is set in the coding and is not a select box. I do not want box 3 to be a select box, only a text field that is not editable. Also the one other thing is, is there a way to have each box pull values based on an XML sheet because i have a ton of info that needs to go in it and i want something easily changeable or editable later. The link i was looking at is for somewhat f an example but needs to be edited is http://www.javascriptkit.com/script/script2/multiplecombo.shtml.

My xml would be something like this. That way i can just edit the xml data and the lists and all will be updated automatically.

<phonesystem>
<Manufacturer>Avaya</Manaufacturer>
<Model>G350</Model>
<Description>Programming Notes Here Specific to G350</Description>
</phonesystem>
<phonesystem>
<Manufacturer>Avaya</Manaufacturer>
<Model>IP Office 500</Model>
<Description>Programming Notes Here Specific to IP Office 500</Description>
</phonesystem>
<phonesystem>
<Manufacturer>Toshiba</Manaufacturer>
<Model>IStrata DK</Model>
<Description>Programming Notes Here Specific to Strata DK</Description>
</phonesystem>

jmrker
05-20-2009, 01:41 AM
Here is a variation on the theme.
See if you can modify it to your needs.


<html>
<HEAD>
<title>Dynamic Drop-Downs</title>

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Extensively Revised Again by: Jay Rumsey, OD http://www.nova.edu/~rumsey
Revised by: DeWayne Whitaker :: http://www.aecdfw.com
Original by: Andrew Berry */

var Land = ['Car:Chevy','Truck:Ford','Train:Passenger'];
var Sea = ['Boat:Fishing','Submarine:Seawolf Class'];
var Air = ['Plane:747','Ultralight:Kitfox','Glider:Schwietzer Glider'];

function Populate(IDS,NextArrayName){
var tmp = [];
var sel = document.getElementById(IDS);
sel.options.length=0;
sel.options[0]=new Option('[SELECT]','',true,true);
var Items = [];
switch (NextArrayName.value) {
case 'Land' : Items = Land; break;
case 'Sea' : Items = Sea; break;
case 'Air' : Items = Air; break;
default: alert('Invalid entry: '+NextArrayName); break;
}
for (var z=0; z<Items.length; z++){
if (Items[z]){
tmp = Items[z].split(':');
sel.options[sel.options.length]=new Option(tmp[0],tmp[1],true,true);
}
}
sel.selectedIndex=0;
}

function ShowCurrentSelections() { // for testing purposes only
var str = 'Selections\n';
var el = document.myForm.Choice1;
if (el.selectedIndex != -1) { str += el.options[el.selectedIndex].text + ' : '; }
el = document.myForm.Choice2;
if (el.selectedIndex != -1) { str += el.options[el.selectedIndex].text + ' : '; }
el = document.myForm.Choice3;
str += el.value;
alert(str);
}
</script>
</HEAD>
<BODY>

<form name="myForm" onsubmit="return false">
<table align="center">
<tr>
<td>
<select id="Choice1" name="Choice1" onchange="Populate('Choice2',this)">
<option value="0">[SELECT]</option>
<option value="Land">Land</option>
<option value="Sea">Sea</option>
<option value="Air">Air</option>
</select>
</td><td>
<select id="Choice2" name="Choice2"
onchange="document.getElementById('Choice3').value=this.value"></select>
</td><td>
<input type="text" id="Choice3" value="" readonly>
</td>
</tr>
</table>
<div style="text-align:center">
<button onclick="ShowCurrentSelections();return false">Show Selections</button>
</div>
</form>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
</BODY>
</html>

Let me know if you need further comments.
:)

mjohnson24
05-20-2009, 07:29 PM
well the problem i have is, 1. im not familiar with javascript very well and plus i have about 150 - 200 entries i have to do and i don't really want to have a script with a ton of variables or anything like that in it. I would like to do it in a way that is easy to add or delete entries as needed with out having to change the main javascript file or anything.

jmrker
05-20-2009, 09:23 PM
well the problem i have is, 1. im not familiar with javascript very well and plus i have about 150 - 200 entries i have to do and i don't really want to have a script with a ton of variables or anything like that in it. I would like to do it in a way that is easy to add or delete entries as needed with out having to change the main javascript file or anything.

So post a sample (10-25) of the entries that you would like to display.
Show what it is that you want to display in select1, select2 and the textbox.

mjohnson24
05-20-2009, 10:20 PM
well 1 sample would be:
select 1: Avaya (If this is chosen)
select 2: based on selection of 'select1': G350, Partner, System 25, Etc
select 3: Text like "Yes it does have MOH but needs to be programmed"

Sample 2 for another product choice in select1 box
select 1: Toshiba (If this is chosen)
select 2: Strata DK, CKT, etc
select 3; Yes it does have MOH and doesn't need to be programmed"

----

Select 1 would consist of choices like avaya, lucent, at&t, toshiba, comdial, etc.
Select 2 is based on what is chosen in select 1
Select 3 is based on what is selected in select 2

jkd
05-21-2009, 02:21 AM
Consider using the below script:
http://codingforums.com/showpost.php?p=789245&postcount=24

Since it takes a simple nested object structure to populate the lists, instead of returning XML you could return JSON, and use that to populate the lists...

mjohnson24
05-26-2009, 03:35 PM
Hi, Im not to familiar with any other coding than html and css. But to give an example of what im looking for, check out this link.
http://www.easyonhold.com/adapters.php

So basically, you select the phone type in the first box, the second box changes to show related makes and then a little bit of text or picture pops up on the right side where you see correct adapter at. I can view the php coding or anything to see how they are pulling the data in the second box but this is what im looking for.