473,323 Members | 1,550 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,323 software developers and data experts.

dynamic dropdownlist, no postback?

I have two drop down lists on my asp.net page, the second of which needs to
be filled in based on the selection in the first dropdownlist. The catch
however, is that it must occur without a postback and I need to feed the
selected values into other variables in the program.

Does anyone have a way to accomplish this? I'm guessing javascript, but I'm
a little green in that area.

Thanks in advance, your help is greatly appreciated.

Jason
Nov 18 '05 #1
6 7473
Here's a pure-html sample..tested in firefox 0.9 and ie 6:

<html>
<head>
</head>
<body>
<form>
<select name="first" onChange="changed(this);">
<option value="1">Canada</option>
<option value="2">US</option>
</select>

<select name="second" />
</form>
</body>
</html>

<script language="javascript">
var lookups = new Array();
lookups[lookups.length] = new Lookup(1, 1, "ontario");
lookups[lookups.length] = new Lookup(1, 2, "quebec");
lookups[lookups.length] = new Lookup(1, 3, "manitoba");
lookups[lookups.length] = new Lookup(1, 4, "nunavut");
lookups[lookups.length] = new Lookup(2, 5, "ohio");
lookups[lookups.length] = new Lookup(2, 6, "florida");
lookups[lookups.length] = new Lookup(2, 7, "washington");
lookups[lookups.length] = new Lookup(2, 8, "idaho");

function Lookup(parentId, value, name){
this.parentId = parentId;
this.value = value;
this.name = name;
}
function changed(sel){
var second = document.forms[0].elements["second"];
if (!second){
return; //error
}
var selectedValue = sel.options[sel.selectedIndex].value;
second.options.length = 0;
for (var i = 0; i < lookups.length; ++i){
var lookup = lookups[i];
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl
"Jason" <ja***@grossmans.net> wrote in message
news:eP**************@TK2MSFTNGP15.phx.gbl...
I have two drop down lists on my asp.net page, the second of which needs to be filled in based on the selection in the first dropdownlist. The catch
however, is that it must occur without a postback and I need to feed the
selected values into other variables in the program.

Does anyone have a way to accomplish this? I'm guessing javascript, but I'm a little green in that area.

Thanks in advance, your help is greatly appreciated.

Jason

Nov 18 '05 #2
Thanks Karl, that's very close to what I'm looking for except for one thing:
My dropdownlist is defined as a server control, not just as a 'select
name...'.

<asp:dropdownlist id="ddlCategory" style="Z-INDEX: 103; LEFT: 80px;
POSITION: absolute; TOP: 248px"
runat="server" Font-Size="11pt" Font-Names="Garamond" Width="248px"
AutoPostBack="True"></asp:dropdownlist>

I've tried substituting ddlCategory with 'first' but can't seem to make it
go. Is it possible to somehow send the value of 'second' to a variable in
my code-behind page or is that just not feasible? Or (even better) to simply
use my existing server controls in the below script instead of defining new
ones?

Thanks again,

Jason

"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in
message news:%2****************@TK2MSFTNGP15.phx.gbl...
Here's a pure-html sample..tested in firefox 0.9 and ie 6:

<html>
<head>
</head>
<body>
<form>
<select name="first" onChange="changed(this);">
<option value="1">Canada</option>
<option value="2">US</option>
</select>

<select name="second" />
</form>
</body>
</html>

<script language="javascript">
var lookups = new Array();
lookups[lookups.length] = new Lookup(1, 1, "ontario");
lookups[lookups.length] = new Lookup(1, 2, "quebec");
lookups[lookups.length] = new Lookup(1, 3, "manitoba");
lookups[lookups.length] = new Lookup(1, 4, "nunavut");
lookups[lookups.length] = new Lookup(2, 5, "ohio");
lookups[lookups.length] = new Lookup(2, 6, "florida");
lookups[lookups.length] = new Lookup(2, 7, "washington");
lookups[lookups.length] = new Lookup(2, 8, "idaho");

function Lookup(parentId, value, name){
this.parentId = parentId;
this.value = value;
this.name = name;
}
function changed(sel){
var second = document.forms[0].elements["second"];
if (!second){
return; //error
}
var selectedValue = sel.options[sel.selectedIndex].value;
second.options.length = 0;
for (var i = 0; i < lookups.length; ++i){
var lookup = lookups[i];
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl
"Jason" <ja***@grossmans.net> wrote in message
news:eP**************@TK2MSFTNGP15.phx.gbl...
I have two drop down lists on my asp.net page, the second of which needs

to
be filled in based on the selection in the first dropdownlist. The catch however, is that it must occur without a postback and I need to feed the
selected values into other variables in the program.

Does anyone have a way to accomplish this? I'm guessing javascript, but

I'm
a little green in that area.

Thanks in advance, your help is greatly appreciated.

Jason


Nov 18 '05 #3
Jason:
You shouldn't need to change first....the onChange="" method passes a
reference to itself...for 2nd, change the code to
var second = document.forms[0].elements["<%=yourSecondDll.UniqueId%>"];

"Jason" <ja***@grossmans.net> wrote in message
news:ed**************@TK2MSFTNGP15.phx.gbl...
Thanks Karl, that's very close to what I'm looking for except for one thing: My dropdownlist is defined as a server control, not just as a 'select
name...'.

<asp:dropdownlist id="ddlCategory" style="Z-INDEX: 103; LEFT: 80px;
POSITION: absolute; TOP: 248px"
runat="server" Font-Size="11pt" Font-Names="Garamond" Width="248px"
AutoPostBack="True"></asp:dropdownlist>

I've tried substituting ddlCategory with 'first' but can't seem to make it
go. Is it possible to somehow send the value of 'second' to a variable in
my code-behind page or is that just not feasible? Or (even better) to simply use my existing server controls in the below script instead of defining new ones?

Thanks again,

Jason

"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in
message news:%2****************@TK2MSFTNGP15.phx.gbl...
Here's a pure-html sample..tested in firefox 0.9 and ie 6:

<html>
<head>
</head>
<body>
<form>
<select name="first" onChange="changed(this);">
<option value="1">Canada</option>
<option value="2">US</option>
</select>

<select name="second" />
</form>
</body>
</html>

<script language="javascript">
var lookups = new Array();
lookups[lookups.length] = new Lookup(1, 1, "ontario");
lookups[lookups.length] = new Lookup(1, 2, "quebec");
lookups[lookups.length] = new Lookup(1, 3, "manitoba");
lookups[lookups.length] = new Lookup(1, 4, "nunavut");
lookups[lookups.length] = new Lookup(2, 5, "ohio");
lookups[lookups.length] = new Lookup(2, 6, "florida");
lookups[lookups.length] = new Lookup(2, 7, "washington");
lookups[lookups.length] = new Lookup(2, 8, "idaho");

function Lookup(parentId, value, name){
this.parentId = parentId;
this.value = value;
this.name = name;
}
function changed(sel){
var second = document.forms[0].elements["second"];
if (!second){
return; //error
}
var selectedValue = sel.options[sel.selectedIndex].value;
second.options.length = 0;
for (var i = 0; i < lookups.length; ++i){
var lookup = lookups[i];
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl
"Jason" <ja***@grossmans.net> wrote in message
news:eP**************@TK2MSFTNGP15.phx.gbl...
I have two drop down lists on my asp.net page, the second of which needs
to
be filled in based on the selection in the first dropdownlist. The catch however, is that it must occur without a postback and I need to feed
the selected values into other variables in the program.

Does anyone have a way to accomplish this? I'm guessing javascript,

but I'm
a little green in that area.

Thanks in advance, your help is greatly appreciated.

Jason



Nov 18 '05 #4
Alright, I must've not eaten my wheaties this morning, because I can't get
this working...

my second dropdownlist is named ddlSpecific. I have the following as my
'changed(sel) function'

var second = document.forms[0].elements["second"]; //This works to populate
the second javascript select box...

var second = document.forms[0].elements["<%=ddlSpecific.items%>"]; //This
doesn't work, but is the one I need to work.

Any thoughts?
"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in
message news:ew**************@tk2msftngp13.phx.gbl...
Jason:
You shouldn't need to change first....the onChange="" method passes a
reference to itself...for 2nd, change the code to
var second = document.forms[0].elements["<%=yourSecondDll.UniqueId%>"];

"Jason" <ja***@grossmans.net> wrote in message
news:ed**************@TK2MSFTNGP15.phx.gbl...
Thanks Karl, that's very close to what I'm looking for except for one

thing:
My dropdownlist is defined as a server control, not just as a 'select
name...'.

<asp:dropdownlist id="ddlCategory" style="Z-INDEX: 103; LEFT: 80px;
POSITION: absolute; TOP: 248px"
runat="server" Font-Size="11pt" Font-Names="Garamond" Width="248px"
AutoPostBack="True"></asp:dropdownlist>

I've tried substituting ddlCategory with 'first' but can't seem to make it
go. Is it possible to somehow send the value of 'second' to a variable in my code-behind page or is that just not feasible? Or (even better) to

simply
use my existing server controls in the below script instead of defining

new
ones?

Thanks again,

Jason

"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in message news:%2****************@TK2MSFTNGP15.phx.gbl...
Here's a pure-html sample..tested in firefox 0.9 and ie 6:

<html>
<head>
</head>
<body>
<form>
<select name="first" onChange="changed(this);">
<option value="1">Canada</option>
<option value="2">US</option>
</select>

<select name="second" />
</form>
</body>
</html>

<script language="javascript">
var lookups = new Array();
lookups[lookups.length] = new Lookup(1, 1, "ontario");
lookups[lookups.length] = new Lookup(1, 2, "quebec");
lookups[lookups.length] = new Lookup(1, 3, "manitoba");
lookups[lookups.length] = new Lookup(1, 4, "nunavut");
lookups[lookups.length] = new Lookup(2, 5, "ohio");
lookups[lookups.length] = new Lookup(2, 6, "florida");
lookups[lookups.length] = new Lookup(2, 7, "washington");
lookups[lookups.length] = new Lookup(2, 8, "idaho");

function Lookup(parentId, value, name){
this.parentId = parentId;
this.value = value;
this.name = name;
}
function changed(sel){
var second = document.forms[0].elements["second"];
if (!second){
return; //error
}
var selectedValue = sel.options[sel.selectedIndex].value;
second.options.length = 0;
for (var i = 0; i < lookups.length; ++i){
var lookup = lookups[i];
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl
"Jason" <ja***@grossmans.net> wrote in message
news:eP**************@TK2MSFTNGP15.phx.gbl...
> I have two drop down lists on my asp.net page, the second of which

needs to
> be filled in based on the selection in the first dropdownlist. The

catch
> however, is that it must occur without a postback and I need to feed the > selected values into other variables in the program.
>
> Does anyone have a way to accomplish this? I'm guessing javascript, but I'm
> a little green in that area.
>
> Thanks in advance, your help is greatly appreciated.
>
> Jason
>
>



Nov 18 '05 #5
ddlSpecific.items --> ddlSpecific.UniqueId

Karl

"Jason" <ja***@grossmans.net> wrote in message
news:uq*************@TK2MSFTNGP11.phx.gbl...
Alright, I must've not eaten my wheaties this morning, because I can't get
this working...

my second dropdownlist is named ddlSpecific. I have the following as my
'changed(sel) function'

var second = document.forms[0].elements["second"]; //This works to populate the second javascript select box...

var second = document.forms[0].elements["<%=ddlSpecific.items%>"]; //This
doesn't work, but is the one I need to work.

Any thoughts?
"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in
message news:ew**************@tk2msftngp13.phx.gbl...
Jason:
You shouldn't need to change first....the onChange="" method passes a
reference to itself...for 2nd, change the code to
var second = document.forms[0].elements["<%=yourSecondDll.UniqueId%>"];

"Jason" <ja***@grossmans.net> wrote in message
news:ed**************@TK2MSFTNGP15.phx.gbl...
Thanks Karl, that's very close to what I'm looking for except for one thing:
My dropdownlist is defined as a server control, not just as a 'select
name...'.

<asp:dropdownlist id="ddlCategory" style="Z-INDEX: 103; LEFT: 80px;
POSITION: absolute; TOP: 248px"
runat="server" Font-Size="11pt" Font-Names="Garamond" Width="248px" AutoPostBack="True"></asp:dropdownlist>

I've tried substituting ddlCategory with 'first' but can't seem to make it
go. Is it possible to somehow send the value of 'second' to a
variable
in my code-behind page or is that just not feasible? Or (even better) to

simply
use my existing server controls in the below script instead of
defining
new
ones?

Thanks again,

Jason

"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in message news:%2****************@TK2MSFTNGP15.phx.gbl...
> Here's a pure-html sample..tested in firefox 0.9 and ie 6:
>
> <html>
> <head>
> </head>
> <body>
> <form>
> <select name="first" onChange="changed(this);">
> <option value="1">Canada</option>
> <option value="2">US</option>
> </select>
>
> <select name="second" />
> </form>
> </body>
> </html>
>
> <script language="javascript">
> var lookups = new Array();
> lookups[lookups.length] = new Lookup(1, 1, "ontario");
> lookups[lookups.length] = new Lookup(1, 2, "quebec");
> lookups[lookups.length] = new Lookup(1, 3, "manitoba");
> lookups[lookups.length] = new Lookup(1, 4, "nunavut");
> lookups[lookups.length] = new Lookup(2, 5, "ohio");
> lookups[lookups.length] = new Lookup(2, 6, "florida");
> lookups[lookups.length] = new Lookup(2, 7, "washington");
> lookups[lookups.length] = new Lookup(2, 8, "idaho");
>
> function Lookup(parentId, value, name){
> this.parentId = parentId;
> this.value = value;
> this.name = name;
> }
> function changed(sel){
> var second = document.forms[0].elements["second"];
> if (!second){
> return; //error
> }
> var selectedValue = sel.options[sel.selectedIndex].value;
> second.options.length = 0;
> for (var i = 0; i < lookups.length; ++i){
> var lookup = lookups[i];
> if (lookup.parentId == selectedValue){
> var option = document.createElement('OPTION');
> option.value = lookup.value;
> option.innerHTML = lookup.name;
> second.appendChild(option);
> }
> }
> }
> </script>
>
> Karl
>
>
> "Jason" <ja***@grossmans.net> wrote in message
> news:eP**************@TK2MSFTNGP15.phx.gbl...
> > I have two drop down lists on my asp.net page, the second of which

needs
> to
> > be filled in based on the selection in the first dropdownlist.

The catch
> > however, is that it must occur without a postback and I need to

feed the
> > selected values into other variables in the program.
> >
> > Does anyone have a way to accomplish this? I'm guessing
javascript, but
> I'm
> > a little green in that area.
> >
> > Thanks in advance, your help is greatly appreciated.
> >
> > Jason
> >
> >
>
>



Nov 18 '05 #6
Alright, that worked fantabulously. Thanks alot Karl.

Strangely enough, for some reason when I switch between 'Design' and HTML
view on the visual studio designer, twice it has corrupted the html portion
and therefore destroyed the design view as well.

Regardless, after a quick restore from a previous version everything is
working just peachy.

Thanks alot Karl, I appreciate all the help.

Jason

"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in
message news:OH*************@TK2MSFTNGP15.phx.gbl...
ddlSpecific.items --> ddlSpecific.UniqueId

Karl

"Jason" <ja***@grossmans.net> wrote in message
news:uq*************@TK2MSFTNGP11.phx.gbl...
Alright, I must've not eaten my wheaties this morning, because I can't get
this working...

my second dropdownlist is named ddlSpecific. I have the following as my
'changed(sel) function'

var second = document.forms[0].elements["second"]; //This works to

populate
the second javascript select box...

var second = document.forms[0].elements["<%=ddlSpecific.items%>"]; //This doesn't work, but is the one I need to work.

Any thoughts?
"Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in message news:ew**************@tk2msftngp13.phx.gbl...
Jason:
You shouldn't need to change first....the onChange="" method passes a
reference to itself...for 2nd, change the code to
var second = document.forms[0].elements["<%=yourSecondDll.UniqueId%>"];
"Jason" <ja***@grossmans.net> wrote in message
news:ed**************@TK2MSFTNGP15.phx.gbl...
> Thanks Karl, that's very close to what I'm looking for except for one thing:
> My dropdownlist is defined as a server control, not just as a 'select > name...'.
>
> <asp:dropdownlist id="ddlCategory" style="Z-INDEX: 103; LEFT: 80px;
> POSITION: absolute; TOP: 248px"
> runat="server" Font-Size="11pt" Font-Names="Garamond" Width="248px" > AutoPostBack="True"></asp:dropdownlist>
>
> I've tried substituting ddlCategory with 'first' but can't seem to make
it
> go. Is it possible to somehow send the value of 'second' to a

variable
in
> my code-behind page or is that just not feasible? Or (even better) to simply
> use my existing server controls in the below script instead of

defining new
> ones?
>
> Thanks again,
>
> Jason
>
> "Karl" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net> wrote in
> message news:%2****************@TK2MSFTNGP15.phx.gbl...
> > Here's a pure-html sample..tested in firefox 0.9 and ie 6:
> >
> > <html>
> > <head>
> > </head>
> > <body>
> > <form>
> > <select name="first" onChange="changed(this);">
> > <option value="1">Canada</option>
> > <option value="2">US</option>
> > </select>
> >
> > <select name="second" />
> > </form>
> > </body>
> > </html>
> >
> > <script language="javascript">
> > var lookups = new Array();
> > lookups[lookups.length] = new Lookup(1, 1, "ontario");
> > lookups[lookups.length] = new Lookup(1, 2, "quebec");
> > lookups[lookups.length] = new Lookup(1, 3, "manitoba");
> > lookups[lookups.length] = new Lookup(1, 4, "nunavut");
> > lookups[lookups.length] = new Lookup(2, 5, "ohio");
> > lookups[lookups.length] = new Lookup(2, 6, "florida");
> > lookups[lookups.length] = new Lookup(2, 7, "washington");
> > lookups[lookups.length] = new Lookup(2, 8, "idaho");
> >
> > function Lookup(parentId, value, name){
> > this.parentId = parentId;
> > this.value = value;
> > this.name = name;
> > }
> > function changed(sel){
> > var second = document.forms[0].elements["second"];
> > if (!second){
> > return; //error
> > }
> > var selectedValue = sel.options[sel.selectedIndex].value;
> > second.options.length = 0;
> > for (var i = 0; i < lookups.length; ++i){
> > var lookup = lookups[i];
> > if (lookup.parentId == selectedValue){
> > var option = document.createElement('OPTION');
> > option.value = lookup.value;
> > option.innerHTML = lookup.name;
> > second.appendChild(option);
> > }
> > }
> > }
> > </script>
> >
> > Karl
> >
> >
> > "Jason" <ja***@grossmans.net> wrote in message
> > news:eP**************@TK2MSFTNGP15.phx.gbl...
> > > I have two drop down lists on my asp.net page, the second of
which needs
> > to
> > > be filled in based on the selection in the first dropdownlist.

The > catch
> > > however, is that it must occur without a postback and I need to feed the
> > > selected values into other variables in the program.
> > >
> > > Does anyone have a way to accomplish this? I'm guessing javascript, but
> > I'm
> > > a little green in that area.
> > >
> > > Thanks in advance, your help is greatly appreciated.
> > >
> > > Jason
> > >
> > >
> >
> >
>
>



Nov 18 '05 #7

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

Similar topics

1
by: Mike | last post by:
I create a dynamic control and added it to a panel. I get the selected value of the control via a btn_click() but my problem is everytime the page is postback the selected values go back to the...
6
by: hb | last post by:
Hi, I have a page bill.aspx and its code-behind bill.aspx.cs. On bill.aspx I have: === Select a month: <asp:dropdownlist runat="server" id="lstDate" autopostback="True" /> <br> <asp:table...
9
by: Tarscher | last post by:
hi all, I have this seemingly simple problem. I have lost a lot of time on it though. When a user selects a value from a dropdownlist (static control) a dynamic control is generated. I have...
5
by: vcuankitdotnet | last post by:
Hi. I have tried to search for this online, but can't find what I'm looking for so I decided to come here. I have a ASP.NET 2.0 website with a masterpage. My .aspx page uses the masterpage. Here is...
2
by: Francois | last post by:
Hello, ASP NET 2.0 visual studio 2005. I am tryng to create a dynamic dropdownlist in the Page_Load event. myDDL = new DropDownList I populate it in the IsPostBack branch of Page_Load.
1
by: MaryamSh | last post by:
Hi, I am creating a Dynamic Search in my application. I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove) By pressing Add button...
0
by: MaryamSh | last post by:
Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I...
4
by: =?Utf-8?B?RHlsYW5TbWl0aA==?= | last post by:
I have a WebForm where I'm dynamically creating some controls and I'm having difficulty understanding how the state is being persisted and how to work with it. I've created a simplified example...
6
by: shashi shekhar singh | last post by:
Respected Sir, I have to create multiple dynamic dropdownlist boxes and add items dynamically in <asp:table> server control but problem occurs , i.e. except of fist dropdown list no dropdownlist...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.