how to make onchange to list common lists

[john woo]

Hi

Please see the following simple script:

<TD align="Left" width="30%" >
<select name="DEPARTMENT" SIZE ="1" style="width:200px;"
onChange="Change()">
<option value="0"> &lt;ALL&gt
<option value="1000012" >Food Sales
<option value="1000014" >Dessert Sales
<option value="1000015" >Liquor Sales
<option value="1000016" >Beer Sales
<option value="1000017" >Wine Sales
<option value="1000226" >Merchandise Sales
<option value="1000227" >Clothing Sales
....
</select>
</TD>

<TD align="Left" width="30%" >
<select name="CATEGORY" SIZE ="1" style="width:200px;" onChange="">
<option value="0"> &lt;ALL&gt
<option value="1000012.1" >D - Classic Recipes
<option value="1000012.2" >D - Carne & Pollo
<option value="1000026.41" >D - Filled Pastas
<option value="1000011.42" >D - Seafood
<option value="1000143.1" >D - Salads
<option value="1000147.2" >D - Pastas & Sauces
<option value="1000148.4" >D - Daily Specials
<option value="1000049.2" >L - Salads
....
</select>
</TD>

<FORM name="InputForm" id="InputForm" >
<INPUT TYPE="HIDDEN" NAME="DEPARTMENT" VALUE="">
<INPUT TYPE="HIDDEN" NAME="CATEGORY" VALUE="">

function Change()
{
var selIndex = document.getElementById('DEPARTMENT').selectedIndex;
var selValue =
document.getElementById('DEPARTMENT').options[selIndex].value;
.....???


my question is, how to modify the change(), so that whenever select 1
department, the category list will show those items which have a prefix
value as the selected department? (ex. value in department 1000012, has
2 category 1000012.1 and 1000012.2 in above case).

 

[john woo]

Thanks lots for the example, Danny.

But I think the data structure in my case is different from your
example.

I think in your example, every item in the 1st select associated with
one array data for the 2nd select; my case is that (sorry I'm not good
at javascript), all items are not arranged in array, what we can
classify them is from the common values between items in 1st select and
the items in 2nd select, and the primary issue is, the order of the
list in 2nd select is random.

Can you tell in such case, how to classify or convert the data
structure for the above example, so that it looks like items in the 2nd
select are all in arrays each of which associated with a item in 1st
select?

 

[RobG]

john woo wrote:
[...]

my question is, how to modify the change(), so that whenever select 1
department, the category list will show those items which have a prefix
value as the selected department? (ex. value in department 1000012, has
2 category 1000012.1 and 1000012.2 in above case).

Below is an example of how to go about it. Be careful, you seem to
have duplicate element names in different forms - why not have just one
form and one set of elements?

I've included 'this' in the onchange call so that you don't need to use
getElementById - saves a few clock cycles by not having to looking up
the form.

You are also better off to specify the widths of elements in 'em' or
such so that they will scale with the user's font size.

<form name="InputForm" id="InputForm" action="" style="width:15em;">
<select name="DEPARTMENT" size="1" onchange="Change(this)">
<option value="0"> &lt;ALL&gt
<option value="1000012" >Food Sales
<option value="1000014" >Dessert Sales
<option value="1000015" >Liquor Sales
<option value="1000016" >Beer Sales
<option value="1000017" >Wine Sales
<option value="1000226" >Merchandise Sales
<option value="1000227" >Clothing Sales
</select>
<select name="CATEGORY" SIZE ="1" style="width:15em;">
<option value="0"> &lt;ALL&gt
<option value="1000012.1" >D - Classic Recipes
<option value="1000012.2" >D - Carne & Pollo
<option value="1000026.41" >D - Filled Pastas
<option value="1000011.42" >D - Seafood
<option value="1000143.1" >D - Salads
<option value="1000147.2" >D - Pastas & Sauces
<option value="1000148.4" >D - Daily Specials
<option value="1000049.2" >L - Salads
</select>
</form>


<script type="text/javascript">

function Change(el) {
if ( !el.style ) return; // If style object not supported, return
var dept = el[el.selectedIndex].value;
var opts = el.form.elements['CATEGORY'];
var i = opts.length;
while ( i-- ){
opts.style.display = (opts.value.match(dept))?'':'none';
}
}
</script>


If you want to do a lot of this stuff, have a look at Matt Kruze's
"dynamic options list".

<URL:http://www.mattkruse.com/javascript/dynamicoptionlist/>

 

[john woo]

Thanks lots.

I've tried the above example and the Matt Kruze's one. unfortunately
all of them only have the value without associated text. my data, ex.
in 1st select <option value="1000012" >Food Sales, contains a value and
its text, value is the ID for database, text for display to user.

I still get stuck on manupulating this kind of data structure.

 

[RobG]

Thanks lots.

I've tried the above example and the Matt Kruze's one. unfortunately
all of them only have the value without associated text. my data, ex.
in 1st select <option value="1000012" >Food Sales, contains a value and
its text, value is the ID for database, text for display to user.

You wanted to show only those options that matched the department
value, that's what the script does.

You can get the option text using the option's text property:

var deptText = el[el.selectedIndex].text;

I still get stuck on manupulating this kind of data structure.

Just explain what you want to do. One issue with the code that I
posted is that if a category option is selected, then a department, an
category may remain displayed that does not belong to the current
department. The code below fixes this (it selects option[0] if the
current selected option does not belong to the selected department).


function Change(el) {
// If style is not supported, leave
if ( !el.style ) return;

// Get the value of the selected department option
var dept = el[el.selectedIndex].value;

// Get the collection of 'CATEGORY' options
var opts = el.form.elements['CATEGORY'];

// Setup some variables
var opt, i = opts.length;

// For every option element
while ( i-- ){

// Save a reference to the option (a little more efficient)
opt = opts;

// If its value matches the selected department, show it
if ( opt.value.match(dept) ) {
opt.style.display = '';

} else {

// Otherwise hide it
opt.style.display = 'none';

// If this one is selected and isn't a match, make the
// '0' element selected
if ( opt.selected ) {
opts[0].selected = true;
}
}
}
}

 

[ASM]

Hi

Please see the following simple script:

<TD align="Left" width="30%" >
<select name="DEPARTMENT" SIZE ="1" style="width:200px;"
onChange="Change()">
<option value="0"> &lt;ALL&gt
<option value="1000012" >Food Sales
<option value="1000014" >Dessert Sales
<option value="1000015" >Liquor Sales
<option value="1000016" >Beer Sales
<option value="1000017" >Wine Sales
<option value="1000226" >Merchandise Sales
<option value="1000227" >Clothing Sales
...
</select>
</TD>

<TD align="Left" width="30%" >
<select name="CATEGORY" SIZE ="1" style="width:200px;" onChange="">
<option value="0"> &lt;ALL&gt
<option value="1000012.1" >D - Classic Recipes
<option value="1000012.2" >D - Carne & Pollo
<option value="1000026.41" >D - Filled Pastas
<option value="1000011.42" >D - Seafood
<option value="1000143.1" >D - Salads
<option value="1000147.2" >D - Pastas & Sauces
<option value="1000148.4" >D - Daily Specials
<option value="1000049.2" >L - Salads
...
</select>
</TD>

<FORM name="InputForm" id="InputForm" >
<INPUT TYPE="HIDDEN" NAME="DEPARTMENT" VALUE="">
<INPUT TYPE="HIDDEN" NAME="CATEGORY" VALUE="">

function Change()
{
var selIndex = document.getElementById('DEPARTMENT').selectedIndex;
var selValue =
document.getElementById('DEPARTMENT').options[selIndex].value;
....???


my question is, how to modify the change(), so that whenever select 1
department, the category list will show those items which have a prefix
value as the selected department? (ex. value in department 1000012, has
2 category 1000012.1 and 1000012.2 in above case).

function Change(){
var dep = document.getElementById('DEPARTMENT')
var selIndex = dep.selectedIndex;
var selValue = dep.options[selIndex].value;
var catValue = selValue.substring(0,selValue.indexOf('.');
var cat = document.getElementById('CATEGORY');
for(var i=0;i<car.length;i++)
if(cat.value==catValue) {
cat.selected=true;
// or (as you prefer)
// cat.selectedIndex = i
}
}

 

[john woo]

Thanks lots. after modifying, the function now is

<script type="text/javascript">
function Change()
{
var dep = document.getElementById('DEPARTMENT');
var selIndex = dep.selectedIndex;
var selValue = dep.options[selIndex].value;
var cat = document.getElementById('CATEGORY');

for(var i=0;i<cat.length;i++)
{
var s = cat.value;
if( s.substring(0,s.indexOf('.')) == selValue )
{
cat.selected=true;
// or (as you prefer)
// cat.selectedIndex = i
}
}
}
</script >

It seemed very close to what I want, but it just displayed one of the
items corresponded to 1st select, and the user can still select all the
items in the 2nd select. How can I further modify the Change(), so that
only those matching items in the 2nd select can be displayed? ex. if
the selected value is 1000012 in the 1st select, then only 1000012.1
and 1000012.2 can be shown in the 2nd select.

I've tried the Rob's example, applying cat.style.display='none', but
it didn't work well in my computer.

 

[ASM]

Thanks lots. after modifying, the function now is

It seemed very close to what I want, but it just displayed one of the
items corresponded to 1st select, and the user can still select all the
items in the 2nd select.

My english is quite poor, don't understand exactly what you want :
I thought you wanted
to show something in 1st select from a choice in 2nd
And now you want its inverse : choice in 1 has to show in 2
(with same function ! on my idea : not very possible)

How can I further modify the Change(), so that

only those matching items in the 2nd select can be displayed? ex. if
the selected value is 1000012 in the 1st select, then only 1000012.1
and 1000012.2 can be shown in the 2nd select.

I've tried the Rob's example, applying cat.style.display='none', but
it didn't work well in my computer.

==========
select correct items in select 2

function Change2()
{
var dep = document.getElementById('DEPARTMENT');
var cat = document.getElementById('CATEGORY');
var selIndex = cat.selectedIndex;
var selValue = cat.options[selIndex].value;

for(var i=0;i<dep.length;i++)
{
var s = dep.value;
if( s.substring(0,s.indexOf('.')) == selValue )
{
dep.selected=true;
// or (as you prefer)
// dep.selectedIndex = i
}
}
}

====================
display only correct items in select 2
Change_and_display(true)
resvert to select 2
Change_and_display(false)


var SelDept = new Array();
var DeptViewed = false
function Change_and_display(yesnot)
{
var dep = document.getElementById('DEPARTMENT');
var cat = document.getElementById('CATEGORY');
var selIndex = cat.selectedIndex;
var selValue = cat.options[selIndex].value;
var Sl = new Array();
var j = 0;
for(var i=0;i<dep.length;i++)
{
var s = dep.value;
if(!DeptViewed) {
SelDept= new Array();
SelDept[0] = dep.value;
SelDept[1] = dep.text;
}
if( s.substring(0,s.indexOf('.')) == selValue )
{
Sl[j] = new Array();
Sl[j][0] = dep.value;
Sl[j][1] = dep.text;
}
}
if(yesnot) {
dep.length=Sl.length;
for(var i=0;i<Sl.lengh;i++) {
dep.value = Sl[0];
dep.text = Sl[0];
}
}
else {
dep.length=SelDept.length;
for(var i=0;i<SelDept.lengh;i++) {
dep.value = SelDept[0];
dep.text = SelDept[0];
}
}
}

not verified

 

[ASM]

====================
display only correct items in select 2
Change_and_display(true)
resvert to select 2
Change_and_display(false)

OOoops ! there was an error !

var SelDept = new Array();
var DeptViewed = false
function Change_and_display(yesnot)
{
var dep = document.getElementById('DEPARTMENT');
var cat = document.getElementById('CATEGORY');
var selIndex = cat.selectedIndex;
var selValue = cat.options[selIndex].value;
var Sl = new Array();
var j = 0;
for(var i=0;i<dep.length;i++)
{
var s = dep.value;
// 1st time function is launched -> fill up array of 2nd select
if(!DeptViewed) {
SelDept= new Array();
SelDept[0] = dep.value;
SelDept[1] = dep.text;
}
if( s.substring(0,s.indexOf('.')) == selValue )
{
Sl[j] = new Array();
Sl[j][0] = dep.value;
Sl[j][1] = dep.text;
j++ ; // this line was forgotten
}
}
DeptViewed=true;
if(yesnot) { // reduce 2nd select to items needed
dep.length=Sl.length;
for(var i=0;i<Sl.lengh;i++) {
dep.value = Sl[0];
dep.text = Sl[0];
}
}
else { // rewrite the 2nd select
dep.length=SelDept.length;
for(var i=0;i<SelDept.lengh;i++) {
dep.value = SelDept[0];
dep.text = SelDept[0];
}
}
}