...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum