onchange requires two reloads for child data?

M · Feb 12, 2005

i have a drop down menu of categories. for each category is
sub-catergories. based on the category i want the second drop-down menu to
list the subcategories to correspond with the parent category. well i have
it working fine, except the second drop-down wont display the corresponding
data unless the page is refreshed twice. how do i get it to load the first
time?

i just have a simple onChange="this.form.submit();" in the parent drop down

thanks!

McKirahan · Feb 12, 2005

M said:
i have a drop down menu of categories. for each category is
sub-catergories. based on the category i want the second drop-down menu to
list the subcategories to correspond with the parent category. well i have
it working fine, except the second drop-down wont display the corresponding
data unless the page is refreshed twice. how do i get it to load the first
time?

i just have a simple onChange="this.form.submit();" in the parent drop down

thanks!

Will this help? Watch for word-wrap.

<html>
<head>
<title>category.htm</title>
<script type="text/javascript">
var cats = new Array();
cats[1] = "sub-category 1a,sub-category 1b,sub-category 1c";
cats[2] = "sub-category 2a,sub-category 2b,sub-category 2c";

function opts(that) {
document.form1.Subcategory.options.length = 0;
var catn = that.options[that.selectedIndex].value;
if (catn > 0) {
var catz = cats[catn].split(",");
for (var i=0; i<catz.length; i++) {
document.form1.Subcategory.options[i+1] = new Option(catz,
i+1);
}
}
}
</script>
</head>
<body>
<form name="form1">
  <b>Category:</b>  
<select name="Category" onchange="opts(this)">
<option value=""></option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>
  <b>Sub-Category:</b>  
<select name="Subcategory" style="width:150px">
<option value=""></option>
</select>
</body>
</html>

Fred Oz · Feb 12, 2005

McKirahan said:
M said:

i have a drop down menu of categories. for each category is
sub-catergories. based on the category i want the second drop-down menu
to

list the subcategories to correspond with the parent category. well i

Click to expand...

[...]

Will this help? Watch for word-wrap.

[...]

There are many reasons why your code won't help. It didn't work
at all in Firefox, I didn't test IE.

[...]

var cats = new Array();
cats[1] = "sub-category 1a,sub-category 1b,sub-category 1c";
cats[2] = "sub-category 2a,sub-category 2b,sub-category 2c";

Why not declare cats[1] & [2] as arrays?

function opts(that) {
document.form1.Subcategory.options.length = 0;

length is a getter, not a setter. I guess the idea is to remove
the options currently in the select? If so, you need to remove
them manually.

Storing a reference to the select means fewer lookups and
simpler code:

var sel = document.form1.Subcategory;

Even better, pass a reference to the subcategory select when
calling the function.

var catn = that.options[that.selectedIndex].value;
if (catn > 0) {

Catn should also be less than the length of the cats array.

if (catn > 0 && catn < cats.length) {

var catz = cats[catn].split(",");

If you'd made cats arrays, you don't need this line.

for (var i=0; i<catz.length; i++) {
document.form1.Subcategory.options[i+1] = new Option(catz,
i+1);

Word wrap is bad, manually break lines to ensure it doesn't
happen. If arrays had been used, this becomes:

sel.options[i+1] = new Option(cats[catn],i);

[...]

There's quite a bit more to comment on, but I don't have the
time.

Try here:

<URL:http://www.ipwebdesign.net/kaelisSpace/useful_dynamicSelects.html>

<Button ...> display is fine, except for two things	1	Oct 23, 2023
Collect Excel Data from Website	5	Apr 30, 2022
Help on onchange event for refreshing the page	1	Nov 19, 2008
Multi select options in a menu	1	Oct 30, 2022
onchange	1	Jul 1, 2004
onChange event	0	Aug 4, 2007
Onchange session removal	1	Jul 5, 2006
Problem with innerhtml and onchange of drop down list	4	Apr 21, 2006

onchange requires two reloads for child data?

M

McKirahan

Fred Oz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads