dynamic dropdownlist, no postback?

  • Thread starter Thread starter Jason
  • Start date Start date
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
 
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
 
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...
 
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...
 
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...
 
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...
 
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...
 
Back
Top