dynamic dropdownlist, no postback?

J

Jason

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
 
K

Karl

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;
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl
 
J

Jason

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 said:
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;
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl


Jason said:
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
Click to expand...
Click to expand...
 
K

Karl

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 said:
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 said:
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;
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl


Jason said:
I have two drop down lists on my asp.net page, the second of which
Click to expand...
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,
Click to expand...
but
I'm
a little green in that area.

Thanks in advance, your help is greatly appreciated.

Jason
Click to expand...
Click to expand...
Click to expand...
 
J

Jason

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 said:
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 said:
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

message news:%[email protected]...
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;
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl


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
Click to expand...
Click to expand...
Click to expand...
 
K

Karl

ddlSpecific.items --> ddlSpecific.UniqueId

Karl

Jason said:
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 said:
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 said:
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
Click to expand...
Click to expand...
make
it
Click to expand...
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
Click to expand...
defining
new
ones?

Thanks again,

Jason

message 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;
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl


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
Click to expand...
feed
the
selected values into other variables in the program.

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

Thanks in advance, your help is greatly appreciated.

Jason
Click to expand...
Click to expand...
Click to expand...
 
J

Jason

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 said:
ddlSpecific.items --> ddlSpecific.UniqueId

Karl

Jason said:
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?


message news:[email protected]...
Jason:
You shouldn't need to change first....the onChange="" method passes a
reference to itself...for 2nd, change the code to
var second =
Click to expand...
document.forms[0].elements[ said:
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
Click to expand...
make
it
go. Is it possible to somehow send the value of 'second' to a
Click to expand...
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>
Click to expand...
wrote
in
message 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;
if (lookup.parentId == selectedValue){
var option = document.createElement('OPTION');
option.value = lookup.value;
option.innerHTML = lookup.name;
second.appendChild(option);
}
}
}
</script>

Karl


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
Click to expand...
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

postback question with 2 dropdownlist and AJAX 0
DropDownList Postback clears the selected value 3
Dynamic Controls - How to access postback data? 4
Dynamic DropDownList 4
No postback after setting SelectedValue 1
DropDownList reset itself 1
Dropdownlist 2
Dynamic dropdownlist problem 4

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 341

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top