473,508 Members | 2,337 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Load new dropdown box

Hi all,

I'm looking for a script that will initially display a first setof options
on a dropdown box, after selecting the initial, it should load another
dropdown box with a new set of values. Like selecting a category, then sub
category - and those values needs to be posted with a standard html form.

Can anyone send me some links to existing ones perhaps ?
Thanx..
RC
Jul 23 '05 #1
4 7751
"RootChaos" <no*****@google.com> wrote in message
news:ck**********@ctb-nnrp2.saix.net...
Hi all,

I'm looking for a script that will initially display a first setof options
on a dropdown box, after selecting the initial, it should load another
dropdown box with a new set of values. Like selecting a category, then sub
category - and those values needs to be posted with a standard html form.

Can anyone send me some links to existing ones perhaps ?
Thanx..
RC

Will this link help:

http://www.quirksmode.org/js/options.html
Jul 23 '05 #2
"RootChaos" <no*****@google.com> wrote in message
news:ck**********@ctb-nnrp2.saix.net...
Hi all,

I'm looking for a script that will initially display a first setof options
on a dropdown box, after selecting the initial, it should load another
dropdown box with a new set of values. Like selecting a category, then sub
category - and those values needs to be posted with a standard html form.

Can anyone send me some links to existing ones perhaps ?
Thanx..
RC


Here's an example; watch for word-wrap.

<html>
<head>
<title>selects.htm</title>
<script type="text/javascript">
var data = new Array();
data[0] = ":";
data[1] = "Illinois:Chicago;Springfield";
data[2] = "California:San Francisco;Los Angeles";
data[3] = "New York:New York City;Rochester";
function sels(what) {
var form = document.forms[0];
if (what == 0) {
for (var i=0; i<data.length; i++) {
item = data[i].split(":");
form.sel1.options[i] = new Option(item[0],i);
}
} else {
form.sel2.options.length = 0;
var pick = form.sel1.options[form.sel1.selectedIndex].value;
var item = data[pick].split(":");
var city = item[1].split(";");
for (var i=0; i<city.length; i++) {
form.sel2.options[i] = new Option(city[i],i);
}
}
}
</script>
</head>
<body onload="sels(0)">
<form>
<b>State: </b>
<select name="sel1" style="width:120" onchange="sels(1)">
</select>
&nbsp; &nbsp;
<b>City: </b>
<select name="sel2" style="width:120">
</select>
</form>
</body>
</html>
Jul 23 '05 #3
RootChaos wrote:
Can anyone send me some links to existing ones perhaps ?


There are many out there.
Here's mine, which has some features that most solutions lack:
http://www.javascripttoolbox.com/dynamicoptionlist/
--
Matt Kruse
http://www.JavascriptToolbox.com
Jul 23 '05 #4
"RootChaos" <no*****@google.com> wrote in message news:<ck**********@ctb-nnrp2.saix.net>...
Hi all,

I'm looking for a script that will initially display a first setof options
on a dropdown box, after selecting the initial, it should load another
dropdown box with a new set of values. Like selecting a category, then sub
category - and those values needs to be posted with a standard html form.

Can anyone send me some links to existing ones perhaps ?
Thanx..
RC


Your best bet is using server side code to accomplish this, but I
won't get into the pitfalls of javascript discussion. Here is a little
bit of code that accomplishes this task... it should be self
explanatory, arrayTxt is an array of the Text that is shown in the
dynamic select box, and arrayVal is its corresponding array of values.
If you want a little tutorial on this stuff, along with some browser
compatibilities, look at http://www.quirksmode.org/js/options.html

I tested this script on Windows IE 6, and Netscape 7.1, if you click
the "Go" submit button, you should notice the querystring appended to
the URL

<html>
<head>
<script type="text/javascript">
function AChange()
{
var aSelect = document.getElementById("aSelect");
if(aSelect.value=="seth")
{
var arrayTxt = new
Array("sethText.txt","sethWeb.htm","sethDoc.doc");
var arrayVal = new Array("sethText","sethWeb","sethDoc");
AddBOptions(arrayTxt,arrayVal);
}
else if(aSelect.value=="dan")
{
var arrayTxt = new
Array("danText.txt","danWeb.htm","danDoc.doc");
var arrayVal = new Array("danText","danWeb","danDoc");
AddBOptions(arrayTxt,arrayVal);
}
else if(aSelect.value=="josh")
{
var arrayTxt = new
Array("joshText.txt","joshWeb.htm","joshDoc.doc");
var arrayVal = new Array("joshText","joshWeb","joshDoc");
AddBOptions(arrayTxt,arrayVal);
}
}

function AddBOptions(arrayTxt,arrayVal)
{
var bSelect = document.getElementById("bSelect");
bSelect.options.length=0;
if(arrayTxt.length==arrayVal.length)
{
for(var i=0;i<arrayTxt.length;i++)
{
bSelect.options[i]=new Option(arrayTxt[i],arrayVal[i]);
}
}
}
</script>
<body>
<form method="get">
User
<select id="aSelect" name="aSelect" onchange="javascript:AChange();">
<option value="DEFAULT">Select First</option>
<option value="seth">Seth</option>
<option value="dan">Dan</option>
<option value="josh">Josh</option>
</select>
<br /><br />
Files
<select id="bSelect" name="bSelect">
<option value="DEFAULT">Select Second</option>
</select>
<input type="submit" value="GO" />
</form>
</body>
</html>
seth flowers -- http://www.charlottewebdev.com
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
2761
by: Stanley J Mroczek | last post by:
How do you load a dropdownlist when edit is clicked in a datagrid ? <Columns> <asp:BoundColumn DataField="OptionDescription" ItemStyle-Wrap="True" HeaderText="Option...
1
2581
by: MN | last post by:
Greetings to all - I'm having some fits with getting this to work but I'm near the end and I'm hoping this one obstacle is not a huge one to get past. Here's my scenario: I have a page...
5
2910
by: Tim | last post by:
I have block of code adding values to dropdown list under if (!Page.IsPostBack) { adding items } else { refreshing data }
9
21627
by: John Kirksey | last post by:
I have a page that uses an in-place editable DataGrid that supports sorting and paging. EnableViewState is turned ON. At the top of the page are several search fields that allow the user to filter...
7
4508
by: Mad Scientist Jr | last post by:
i have a dropdown control with autopostback=on that when selected, posts back and populates a second dropdown. the 2nd dropdown takes a while to load, giving the user time to start typing in other...
1
1184
by: | last post by:
im dynamically loading dropdown boxes on page.load like this : cbo1.Items.Add("") cbo1.Items.Add("OT") cbo1.Items.Add("ST") cbo1.Items.Add("Ho") cbo1.Items.Add("FMLSK")...
4
1639
by: Chris | last post by:
Hi, I am wondering where in my ASP.NET application to load a dropdown list box that basically only changes once a year. I load a drop down list box with about 40 locations. If it never...
4
2418
by: Kalvin | last post by:
I have seen this question raised, but I cannot find an answer. I have an MDI app, when I load an child form with a combobox being bound in the load event, it won't allow me to set selectedindex =...
4
5675
by: =?Utf-8?B?QWxoYW1icmEgRWlkb3MgS2lxdWVuZXQ=?= | last post by:
Hello, I have a list of entities (with properties Key and Description). Which is the best manner of load dropdownlist with this list ? Thanks in advance --...
0
7123
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7383
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7046
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7498
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5627
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
5053
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4707
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3182
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
766
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.