SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2002
    Location
    Orlando, Florida
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Combo Box Problem

    I'd like to use a series of combo boxes on a form to filter results. Each combo box would let the user pick a criterion to filter the results (which would themselves appear in a list box on the same form).

    Is it possible to do that in JavaScript?

    There's an example here: http://www.avengersforever.org/comics.asp, but I believe it's programmed in ASP. I want to duplicate this functionality as easily and simply as possible in JavaScript.

    Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a 'positive' filter

    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    // Select Filter (04-06-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    var zxcSelAry=new Array();
    zxcSelAry[0]=['0 Filter F2|F3','value','F2|F3|'];
    zxcSelAry[1]=['1 Filter F1','value','F1|'];
    zxcSelAry[2]=['2 Filter F2','value','F2|'];
    zxcSelAry[3]=['3 Filter F1|F2','value','F1|F2|'];
    zxcSelAry[4]=['4 Filter F3','value','F3|'];
    zxcSelAry[5]=['5 Filter F1','value','F1|'];
    zxcSelAry[6]=['6 Filter F1|F2','value','F1|F2'];
    var 
    zxcFil='F1|F2|F3|';


    var 
    zxcObjAry=new Array();
    var 
    zxcS,zxcAdd,zxcF;

    function 
    zxcMakeSelect(){
     
    zxcS=document.getElementById('SelMaster');
     
    zxcS.options.length=0;
     for (
    zxc0=0;zxc0<zxcSelAry.length;zxc0++){
      
    zxcAdd=false;
      for (
    zxc1=0;zxc1<zxcFil.split('|').length-1;zxc1++){
       if (
    zxcSelAry[zxc0][2].match(zxcFil.split('|')[zxc1])){
        
    zxcAdd=true;
       }
      }
      if (
    zxcAdd){
       
    zxcS.options[zxcS.options.length]=new Option(zxcSelAry[zxc0][0],zxcSelAry[zxc0][1],true,true);
      }
     }
     
    zxcS.selectedIndex=-1;
    }

    function 
    zxcFilter(obj){
     
    zxcAdd=true;
     for (
    zxc0=0;zxc0<zxcObjAry.length;zxc0++){
      if (
    zxcObjAry[zxc0]==obj){
       
    zxcAdd=false;
      }
     }
     if (
    zxcAdd){
      
    zxcObjAry[zxcObjAry.length]=obj;
     }
     
    zxcFil='';
     for (
    zxc1=0;zxc1<zxcObjAry.length;zxc1++){
      
    zxcFil+=zxcObjAry[zxc1].options[zxcObjAry[zxc1].selectedIndex].value;
     }
     
    zxcMakeSelect();
    }

    //-->
    </script>



    <body onload="zxcMakeSelect();" >
    <select id="SelMaster" size="10">
    </select>
    <br>
    <select size="1" onchange="zxcFilter(this);">
    <option value="XX|" >Filter 1</option>
    <option value="F1|" >F1</option>
    <option value="F2|" >F2</option>
    <option value="F3|" >F3</option>
    </select>
    <select size="1" onchange="zxcFilter(this);">
    <option value="XX|" >Filter 2</option>
    <option value="F1|" >F1</option>
    <option value="F2|" >F2</option>
    <option value="F3|" >F3</option>
    </select>

    </body>

    </html> 

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for the record

    PM recieved

    meets requirement but wants persistance 'cookie'

    maybe tomorrow

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>



    <
    body onload="f26_MakeSelect();" onunload="f26_SetCookie();" >

    <
    table cellpadding="0" cellspacing="0" border="0">
      <
    tr>
        <
    td width="120" align="center" >
    <
    select id="f26_Master" size="7" style="width:100px;">
    </
    select>
        </
    td>
        <
    td width="120" align="center" >
    <
    select size="1" onchange="f26_MakeFilter(this);">
    <
    option >Filter 1</option>
    <
    option value="F1|" >F1</option>
    <
    option value="F2|" >F2</option>
    <
    option value="F3|" >F3</option>
    </
    select>
    <
    br>
    <
    select size="1" onchange="f26_MakeFilter(this);">
    <
    option >Filter 2</option>
    <
    option value="F1|" >F1</option>
    <
    option value="F2|" >F2</option>
    <
    option value="F3|" >F3</option>
    </
    select>
        </
    td>
      </
    tr>
    </
    table>

    <
    br>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    // Select Filter f26_Part1 (04-06-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    // Filter Select List option by selections of other Select Lists
    // With Presistance (Cookie)

    // Application Notes

    // Filters are defined by charactor strings suffixed by '|';
    // The 'Master' Select List is populated by options defined in an array 'f26_SelAry'
    // This array is a dimensioned array
    // Each field defines an option in a three field array defining the text, value and filter
    // e.g.
    // f26_SelAry[0]=['(0) Filter F2|F3','value','F2|F3|'];

    // A <BODY> onload event initialises the script and populates the 'Master' Select List
    // e.g. <body onload="f26_MakeSelect();" >

    // Options complying with Filters specified in  f26_FirstFilter will be applied on initialisation
    // that is any number of filters may be applied or none if f26_FirstFilter='';

    // The  'Master' Select List is defined by HTML Code
    // <select id="f26_Master" size="10" style="width:100px;">
    // </select>
    // The  id="f26_Master" is mandatory

    // Each Select List to apply the filter is defined by HTML Code
    // Typical HTML
    //  <select size="1" onchange="f26_MakeFilter(this);">
    //  <option >Filter 1</option>
    //  <option value="F1|F2" >F1|F2</option>
    //  <option value="F2|" >F2</option>
    //  <option value="F3|" >F3</option>
    //  </select>

    // The  onchange="f26_MakeFilter(this);" call applies the filters defined by value of the selected option
    // Option 0 value is defined by cusomising variable f26_FirstFilter
    // Filters specified in  f26_FirstFilter will be applied if option 0 is selected
    // that is any number of filters may be applied or none if f26_FirstFilter='';

    // NOTE: filters are applied positively, i.e. options with the specified filter WILL be displayed.

    // Persistance (Cookie)
    // The applied filters can be retained on the next visit
    // by inclusion of <BODY> unload event
    // e.g. <body onload="f26_MakeSelect();" onunload="f26_SetCookie(f26_Filter);" >



    // The functional Code f26_Part2 (about 1.5K) is best as an external JavaScript

    // All variable, function etc names are prefixed with 'f26_' to minimise conflicts with other JavaScripts

    // Customising Variables

    var f26_FirstFilter='F1|F2|F3|'// the initial option filters required specified as a string
                                     // use var f26_FirstFilter=''; for no optiona to be displayed

    // Required for Persistance (Cookie)
    var f26_Days=1;                  // The current filters will be remembered on revisits for a specified number of days
    var f26_Cookie='f26_MyNameY';    // The Cookie name

    // Each field defines a 'Master' Select List option.
    var f26_SelAry=new Array();
    // Each option field defines
    // Field 0 = text
    // Field 1 = value
    // Field 2 = filters suffixed with '|'
    f26_SelAry[0]=['(0) Filter F2|F3','value','F2|F3|'];
    f26_SelAry[1]=['(1) Filter F1','value','F1|'];
    f26_SelAry[2]=['(2) Filter F2','value','F2|'];
    f26_SelAry[3]=['(3) Filter F1|F2','value','F1|F2|'];
    f26_SelAry[4]=['(4) Filter F3','value','F3|'];
    f26_SelAry[5]=['(5) Filter F1','value','F1|'];
    f26_SelAry[6]=['(6) Filter F1|F2','value','F1|F2'];

    //-->
    </script>

    <script language="JavaScript" type="text/javascript">
    <!--
    // Select Filter f26_Part2 (04-06-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk


    // Functional Code - NO Need to change

    var f26_ObjAry=new Array();
    var f26_S,f26_Add,f26_Filter;

    function f26_MakeSelect(){
     if (!f26_Filter){
      f26_Filter=f26_FirstFilter;
      if (window['f26_Cookie']){
       if (f26_GetCookie()){
        f26_Filter=f26_GetCookie();
       }
      }
     }
     f26_S=document.getElementById('f26_Master');
     f26_S.options.length=0;
     for (f26_0=0;f26_0<f26_SelAry.length;f26_0++){
      f26_Add=false;
      for (f26_1=0;f26_1<f26_Filter.split('|').length-1;f26_1++){
       if (f26_SelAry[f26_0][2].match(f26_Filter.split('|')[f26_1])){
        f26_Add=true;
       }
      }
      if (f26_Add){
       f26_S.options[f26_S.options.length]=new Option(f26_SelAry[f26_0][0],f26_SelAry[f26_0][1],true,true);
      }
     }
     f26_S.selectedIndex=-1;
    }

    function f26_MakeFilter(obj){
     f26_Add=true;
     for (f26_0=0;f26_0<f26_ObjAry.length;f26_0++){
      if (f26_ObjAry[f26_0]==obj){
       f26_Add=false;
      }
     }
     if (f26_Add){
      f26_ObjAry[f26_ObjAry.length]=obj;
      f26_ObjAry[f26_ObjAry.length-1].options[0].value=f26_FirstFilter;
     }
     f26_Filter='';
     for (f26_1=0;f26_1<f26_ObjAry.length;f26_1++){
      f26_Filter+=f26_ObjAry[f26_1].options[f26_ObjAry[f26_1].selectedIndex].value;
     }
     f26_MakeSelect();
    }

    function f26_GetCookie() {
     var f26_st=document.cookie.indexOf(f26_Cookie+"=");
     var f26_len=f26_st+f26_Cookie.length+1;
     if ((!f26_st)&&(f26_Cookie != document.cookie.substring(0,f26_Cookie.length))) return null;
     if (f26_st==-1) return null;
     var f26_end=document.cookie.indexOf(";",f26_len);
     if (f26_end==-1) f26_end=document.cookie.length;
     return unescape(document.cookie.substring(f26_len,f26_end));
    }

    function f26_SetCookie(){
     document.cookie=f26_Cookie+"="+escape(f26_Filter)+";expires="+new Date(new Date().getTime()+f26_Days*86400000).toGMTString()+";path=/;"
    }

    //-->
    </script>
    </body>

    </html> 


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •