how to make onchange to list common lists

Discussion in 'Javascript' started by john woo, Jul 3, 2005.

  1. john woo

    john woo Guest

    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).


    --
    Thanks lots
    John
    Toronto
     
    john woo, Jul 3, 2005
    #1
    1. Advertising

  2. john woo

    john woo Guest

    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?

    --
    Tlhanks again

    John
     
    john woo, Jul 4, 2005
    #2
    1. Advertising

  3. john woo

    RobG Guest

    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/>


    --
    Rob
     
    RobG, Jul 4, 2005
    #3
  4. john woo

    john woo Guest

    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.

    --
    John
     
    john woo, Jul 4, 2005
    #4
  5. john woo

    RobG Guest

    john woo wrote:
    > 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;
    }
    }
    }
    }


    --
    Rob
     
    RobG, Jul 4, 2005
    #5
  6. john woo

    ASM Guest

    john woo wrote:
    > 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
    }
    }

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 4, 2005
    #6
  7. john woo

    john woo Guest

    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.
    --
    Thanks
    Best Regards
    John
     
    john woo, Jul 4, 2005
    #7
  8. john woo

    ASM Guest

    john woo wrote:
    > 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

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 4, 2005
    #8
  9. john woo

    ASM Guest

    ASM wrote:
    >
    > ====================
    > 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];
    }
    }
    }

    >
    > not verified
    >



    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Jul 4, 2005
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==

    List of lists of lists of lists...

    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==, May 8, 2006, in forum: Python
    Replies:
    5
    Views:
    410
    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==
    May 15, 2006
  2. ardief
    Replies:
    14
    Views:
    743
    Paddy
    Feb 3, 2007
  3. Denny
    Replies:
    1
    Views:
    783
  4. antar2
    Replies:
    2
    Views:
    393
    Bighead
    Jul 17, 2008
  5. John Reye
    Replies:
    28
    Views:
    1,375
    Tim Rentsch
    May 8, 2012
Loading...

Share This Page