avim
asked on
changing a <select> dropdown content...
Well, here goes:
i need to make 2 <select> boxes in a form
that when choosing one of the two first options the other select`s content should change AND ofcourse when choosing one of the other options(from the first box) there should be a different content in the second one....
Hmm.. that`s it.
Hope anyone could help me (and understand what i`m
asking here to.... ;-)
TNX,
Avi.
i need to make 2 <select> boxes in a form
that when choosing one of the two first options the other select`s content should change AND ofcourse when choosing one of the other options(from the first box) there should be a different content in the second one....
Hmm.. that`s it.
Hope anyone could help me (and understand what i`m
asking here to.... ;-)
TNX,
Avi.
ASKER
tnx!
didn`t think aboy it....
btw, i see u alot out here and u helped
a few times b4 too.
I realy appricate it!
:-)
didn`t think aboy it....
btw, i see u alot out here and u helped
a few times b4 too.
I realy appricate it!
:-)
ASKER
This question has a deletion request Pending
ASKER
This question has a deletion request Pending
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body>
<form>
<select onChange="sh(this, 'otherselect')">
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body>
<form>
<select onChange="sh(this, 'otherselect')">
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
ASKER
Already found somtin`....
tnx again.
tnx again.
*LOL*...
here it is
<html>
<script language=javascript>
function c2()
{
document.abc.s1.selectedIn
return true;
}
function c1()
{
document.abc.s2.selectedIn
return true;
}
</script>
<body>
<form name=abc>
<select name=s1 onchange=c1()>
<option value=1>item 1
<option value=2>item 2
</select>
<select name=s2 onchange=c2()>
<option value=a>item a
<option value=b>item b
</select>
</body>
</html>
contact me for further enquiries
<html>
<script language=javascript>
function c2()
{
document.abc.s1.selectedIn
return true;
}
function c1()
{
document.abc.s2.selectedIn
return true;
}
</script>
<body>
<form name=abc>
<select name=s1 onchange=c1()>
<option value=1>item 1
<option value=2>item 2
</select>
<select name=s2 onchange=c2()>
<option value=a>item a
<option value=b>item b
</select>
</body>
</html>
contact me for further enquiries
WAHAHHA =)...sorry, I'm having fun here. In seconds a thread is crowded with people...
ASKER
I`m happy if u`r happy! :-D
but realy, CJ_S , u made a great script but notice that when the page is first loaded there isn`t any content in the second select...
that could be confusing 4 the rookie user...
but realy, CJ_S , u made a great script but notice that when the page is first loaded there isn`t any content in the second select...
that could be confusing 4 the rookie user...
ASKER
I`m happy if u`r happy! :-D
but realy, CJ_S , u made a great script but notice that when the page is first loaded there isn`t any content in the second select...
that could be confusing 4 the rookie user...
but realy, CJ_S , u made a great script but notice that when the page is first loaded there isn`t any content in the second select...
that could be confusing 4 the rookie user...
the only line to change for that is:
<body>
would become
<body onload="sh(document.forms[
But if ur happy already.... :)
regards,
CJ
<body>
would become
<body onload="sh(document.forms[
But if ur happy already.... :)
regards,
CJ
ASKER
I`m happy if u`r happy! :-D
but realy, CJ_S , u made a great script but notice that when the page is first loaded there isn`t any content in the second select...
that could be confusing 4 the rookie user...
but realy, CJ_S , u made a great script but notice that when the page is first loaded there isn`t any content in the second select...
that could be confusing 4 the rookie user...
Uhh - too many chefs!!!
Michel
Michel
ASKER
sorry CJ, althogh i`m happy there`s still a little bug overthere....
try adding another option to the "menu2"
like so:
"....
m_arr[1] = "blah 3|blah 4|blah 5";
........"
and than when running the page if u change your selection from menu1 to 2 and than back to menu 1 the "blah 5" is
still staying in there...
i guess the reason is pretty obvious to u but i don`t know how to deal with that...
tnx alot,
avi.
:-)
try adding another option to the "menu2"
like so:
"....
m_arr[1] = "blah 3|blah 4|blah 5";
........"
and than when running the page if u change your selection from menu1 to 2 and than back to menu 1 the "blah 5" is
still staying in there...
i guess the reason is pretty obvious to u but i don`t know how to deal with that...
tnx alot,
avi.
:-)
ASKER
sorry CJ, althogh i`m happy there`s still a little bug overthere....
try adding another option to the "menu2"
like so:
"....
m_arr[1] = "blah 3|blah 4|blah 5";
........"
and than when running the page if u change your selection from menu1 to 2 and than back to menu 1 the "blah 5" is
still staying in there...
i guess the reason is pretty obvious to u but i don`t know how to deal with that...
tnx alot,
avi.
:-)
try adding another option to the "menu2"
like so:
"....
m_arr[1] = "blah 3|blah 4|blah 5";
........"
and than when running the page if u change your selection from menu1 to 2 and than back to menu 1 the "blah 5" is
still staying in there...
i guess the reason is pretty obvious to u but i don`t know how to deal with that...
tnx alot,
avi.
:-)
sorry there : )
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4|blah 5";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
other_obj.options.length = 0
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body onload="sh(document.forms[
<form>
<select onChange="sh(this, 'otherselect')">
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4|blah 5";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
other_obj.options.length = 0
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body onload="sh(document.forms[
<form>
<select onChange="sh(this, 'otherselect')">
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
ASKER
oh, and ....
the selections might change to more than 2 or 3 selections, so if u can help me understand how will i be able to deal with that script and adjust it as required later on...
the selections might change to more than 2 or 3 selections, so if u can help me understand how will i be able to deal with that script and adjust it as required later on...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Netscape will only show the number of items that were there when the drop down was initially made.
Change
<select name="listTwo" ...>
<option>Sub Option List</option>
</select>
to
<select name="listTwo" ...>
<option>Sub Option List</option>
<option>__________________
<option>__________________
<option>__________________
<option>__________________
<option>__________________
</select>
or rewrite a div with a form containing the select.
Also in select mutiple, you cannot make netscape scroll to a selection that is not visible
Change
<select name="listTwo" ...>
<option>Sub Option List</option>
</select>
to
<select name="listTwo" ...>
<option>Sub Option List</option>
<option>__________________
<option>__________________
<option>__________________
<option>__________________
<option>__________________
</select>
or rewrite a div with a form containing the select.
Also in select mutiple, you cannot make netscape scroll to a selection that is not visible
That's what I was assuming. I imagined that it came down to Netscape's inability to dynamically generate/regenerate an element once it has been displayed on the page. I had actually used the method of adding in filler spots so Netscape would not have a problem with it, but I was trying to find a work-a-round without having to put dummy spots in the select box... To no avail, apparently. :-)
Thanks.. I am off to bed.
Cheers
Thanks.. I am off to bed.
Cheers
The old method was to do a history.go(0) to refresh the select
<html>
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4|blah 5";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
other_obj.options.length = 0
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body onload="sh(document.forms[
<form>
<select onChange="sh(this, 'otherselect')" name='firstselect'>
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
m_arr is an array which contains all the menu-items corresponding to the first select-object. In the first select box you have the function onChange which takes 2 parameters. 1) the current object 2) the listbox which should be changed...the function itself gets some references to the form and objects. Then sets the second selectbox to nothing and then loops through the array with the index being the same as the current index of the select box! it splits the string as to get an array back and then loops through that one array and fills in the options. To adjust it to your likings ...well...the only thing for you (I think) would be to change the first selectbox with items you need...and to fill the array which contains the items for the other selectbox. Oh, and to get the current selected item in the second selectbox, you can just refer to it like normally.
document.forms[0]['otherse
or
document.forms[0]['otherse
dunno what more to say...I hate my internetconnectiona t work =(...
regards,
CJ
<head>
<script language=javascript>
var m_arr = new Array();
m_arr[0] = "blah 1|blah 2";
m_arr[1] = "blah 3|blah 4|blah 5";
function sh(obj, o_objn)
{
f = obj.form;
other_obj = f[o_objn];
s = m_arr[obj.selectedIndex].s
other_obj.options.length = 0
for(i=0;i<s.length;i++)
{
other_obj.options[i] = new Option(s[i], s[i]);
}
}
</script>
</head>
<body onload="sh(document.forms[
<form>
<select onChange="sh(this, 'otherselect')" name='firstselect'>
<option>menu 1</option>
<option>menu 2</option>
</select>
<select name="otherselect">
</select>
</form>
</body>
</html>
m_arr is an array which contains all the menu-items corresponding to the first select-object. In the first select box you have the function onChange which takes 2 parameters. 1) the current object 2) the listbox which should be changed...the function itself gets some references to the form and objects. Then sets the second selectbox to nothing and then loops through the array with the index being the same as the current index of the select box! it splits the string as to get an array back and then loops through that one array and fills in the options. To adjust it to your likings ...well...the only thing for you (I think) would be to change the first selectbox with items you need...and to fill the array which contains the items for the other selectbox. Oh, and to get the current selected item in the second selectbox, you can just refer to it like normally.
document.forms[0]['otherse
or
document.forms[0]['otherse
dunno what more to say...I hate my internetconnectiona t work =(...
regards,
CJ
ASKER
Thanks!
:-D
:-D
Michel