469,299 Members | 2,050 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,299 developers. It's quick & easy.

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 7389
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Tarscher | last post: by
5 posts views Thread by vcuankitdotnet | last post: by
2 posts views Thread by Francois | last post: by
4 posts views Thread by =?Utf-8?B?RHlsYW5TbWl0aA==?= | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.