www.webdeveloper.com
Results 1 to 12 of 12

Thread: Javascript filtering dropdown list based on radio button selection

  1. #1
    Join Date
    Jan 2012
    Posts
    6

    Javascript filtering dropdown list based on radio button selection

    Hi folks,

    I wish to filter the below dropdown list based on radio button selection.

    1. Radio button for ALL should list all (defaults to initial option values - all values)
    2. Radio button for OLD should list only OLD( no OLDNEW or NEW only OLD)
    ie. TOWNOLD, CITYOLD & COUNTRYOLD
    3. Radio button for NEW should list only NEW (no OLDNEW or OLD olny NEW)
    ie. TOWNNEW, CITYNEW & COOUNTRYNEW
    4. Radio button for OLDNEW should list only OLDNEW (no OLD & no NEW only OLDNEW)
    ie. TOWNOLDNEW, CITYOLDNEW & COUNTRYOLDNEW

    *** After filtering the OLD, NEW or OLDNEW, if the ALL button is clicked it should return back to the initial default values in the dropdown list.

    I will highly appreciate a javascript function to achieve this.

    <html>
    <body>
    <input type="radio" name="radiogrp" value="ALL">ALL<br/>
    <input type="radio" name="radiogrp" value="OLD">OLD<br/>
    <input type="radio" name="radiogrp" value="NEW">NEW<br/>
    <input type="radio" name="radiogrp" value="OLDNEW">OLDNEW<br/>

    <select name="list1">
    <option value="TOWNOLD">TOWNOLD</option>
    <option value="TOWNNEW">TOWNNEW</option>
    <option value="TOWNOLDNEW">TOWNOLDNEW</option>
    <option value="CITYOLD">CITYOLD</option>
    <option value="CITYNEW">CITYNEW</option>
    <option value="CITYOLDNEW">CITYOLDNEW</option>
    <option value="COUNTRYOLD">COUNTRYOLD</option>
    <option value="COUNTRYNEW">COUNTRYNEW</option>
    <option value="COUNTRYOLDNEW">COUNTRYOLDNEW</option>
    </select>
    </body>
    </html>

    Thanks

    ~SD

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Something to consider...

    Consider this method...
    Code:
    <html>
    <head>
    <title>Selectbox limiter</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=255802
    
    var choicesOLD = ['TOWNOLD','CITYOLD','COUNTRYOLD'];
    var choicesNEW = ['TOWNNEW','CITYNEW','COUNTRYNEW'];
    var choicesOLDNEW = ['TOWNOLDNEW','CITYOLDNEW','COUNTRYOLDNEW'];
    
    function setOptions(matchWith){
      var choices = [];
      var sel = document.getElementById('list1');
      var tmp = '';
      sel.options.length = 0;
      switch (matchWith) {
        case 'OLD' : choices = choicesOLD.slice(0); break;
        case 'NEW' : choices = choicesNEW.slice(0); break;
        case 'OLDNEW' : choices = choicesOLDNEW.slice(0); break;
        case 'ALL' : choices = [].concat(choicesOLD,choicesNEW,choicesOLDNEW); break;
      }
      for (i=0; i<choices.length; i++) {  
        tmp = choices[i];
        sel.options[sel.options.length] = new Option(tmp,tmp,false,false);
      }
    }
    
    window.onload = function () { setOptions('ALL'); }
    </script>
    </head>
    <body>
    <label><input type="radio" name="radiogrp" value="ALL" onclick="setOptions('ALL')" checked>ALL<label> 
    <label><input type="radio" name="radiogrp" value="OLD" onclick="setOptions('OLD')">OLD<label>
    <label><input type="radio" name="radiogrp" value="NEW" onclick="setOptions('NEW')">NEW<label>
    <label><input type="radio" name="radiogrp" value="OLDNEW" onclick="setOptions('OLDNEW')">OLDNEW<label>
    <br/>
    
    <select name="list1" id="list1"></select>
    </body>
    </html>
    Good Luck!

  3. #3
    Join Date
    Jan 2012
    Posts
    6
    Thank you so much for your prompt reply. I appreciate that.

    In real scenario the Select options (dropdown list) are pre-populated from database at run time.
    Any ideas how the same can achieved in such scenario.

    thx
    ~SD

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    Create the "choices???" arrays on the fly from the database information.

  5. #5
    Join Date
    Jan 2012
    Posts
    6
    thanks

  6. #6
    Join Date
    Jan 2012
    Posts
    6
    Below is what i tried....but no luck.

    I want to take the initial dropdown list/select option values and sort or filter that dropdown list based on the radio button selection. Once a radio button is selected it should filter the list based on the filter criteria (ALL for all, "ADH" for only ADH and so on) and re-populate the same dropdown list accordingly. At any time when "ALL" is clicked then the same dropdown list should be populated with the original/initial values.

    Here is what i tried but no luck. If you can help me that would be great input for me.
    --------------------------------------------------------------------------------

    <html>
    <head>
    <title>Selectbox limiter</title>
    <script type="text/javascript">

    /*
    var choicesADH = ['TOWNOLD','CITYOLD','COUNTRYOLD'];
    var choicesON = ['TOWNNEW','CITYNEW','COUNTRYNEW'];
    var choicesONADH = ['TOWNOLDNEW','CITYOLDNEW','COUNTRYOLDNEW'];
    */
    // Replaced the above with the below code for 4 arrays
    var choicesADH = new Array();
    var choicesON = new Array();
    var choicesONADH = new Array();
    var choicesOTH = new Array();


    var x = document.getElementById('list1');
    alert(x.length);

    var i;
    for (i=0;i<x.length;i++)
    {

    if(x.options[i].text.indexOf('ADH') != -1 && x.options[i].text.indexOf('ON') == -1){
    //// Only "ADH" but no "ON" or "ONADH"
    choicesADH[i]=x.options[i].text;
    }

    else if(x.options[i].text.indexOf('ON') != -1 && x.options[i].text.indexOf('ADH') == -1){
    // Only "ON" but no "ADH" or "ONADH"
    choicesON[i]=x.options[i].text;
    }

    else if (x.options[i].text.indexOf('ONADH') != -1){
    // Only "ONADH" but no "ADH" or "ON"
    choicesONADH[i]=x.options[i].text;
    }
    else {
    // Remaining vlaues go in this array
    choicesOTH[i]=x.options[i].text;
    }
    }

    function setOptions(matchWith){


    var choices = [];
    var sel = document.getElementById('list1');
    var tmp = '';
    sel.options.length = 0;
    sel2.options.length = 0;
    switch (matchWith) {
    case 'ADH' : choices = choicesADH.slice(0); break;
    case 'ON' : choices = choicesON.slice(0); break;
    case 'ONADH' : choices = choicesONADH.slice(0); break;
    case 'ALL' : choices = [].concat(choicesADH,choicesON,choicesONADH, choicesOTH); break;
    }
    for (i=0; i<choices.length; i++) {
    tmp = choices[i];
    sel.options[sel.options.length] = new Option(tmp,tmp,false,false);
    }
    }

    window.onload = function () { setOptions('ALL'); }
    </script>
    </head>
    <body>
    <label><input type="radio" name="radiogrp" value="ALL" onclick="setOptions('ALL')" checked>ALL<label>
    <label><input type="radio" name="radiogrp" value="ADH" onclick="setOptions('ADH')">ADH<label>
    <label><input type="radio" name="radiogrp" value="ON" onclick="setOptions('ON')">ON<label>
    <label><input type="radio" name="radiogrp" value="ONADH" onclick="setOptions('ONADH')">ONADH<label>
    <br/>

    <select name="list1" id="list1">
    <option value="LANRA12">LANRA12</option>
    <option value="LANRAADH24">LANRAADH24</option>
    <option value="LANRAON24">LANRAON24</option>
    <option value="LANRAONADH24">LANRAONADH24</option>
    <option value="LANRA24">LANRZ24</option>
    <option value="LANRZADH36">LANRZADH36</option>
    <option value="LANRZON36">LANRZON36</option>
    <option value="LANRZONADH36">LANRZONADH36</option>
    <option value="LANRA36">LANRZ36</option>
    <option value="LANRZADH48">LANRZADH48</o36ion>
    <option value="LANRZON48">LANRZON48</option>
    <option value="LANRZONADH48">LANRZONADH48</option>
    </select>

    </body>
    </html>

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Exclamation

    You did not populate your new arrays (???)
    Code:
    // Replaced the above with the below code for 4 arrays
    var choicesADH = new Array();
    var choicesON = new Array();
    var choicesONADH = new Array();
    var choicesOTH = new Array();
    Also you don't need the select options in the HTML section if you
    initialize as in my original code posted.
    Code:
    ...
    window.onload = function () { setOptions('ALL'); }
    </script>
    </head>
    <body>
    <label><input type="radio" name="radiogrp" value="ALL" onclick="setOptions('ALL')" checked>ALL<label> 
    <label><input type="radio" name="radiogrp" value="OLD" onclick="setOptions('OLD')">OLD<label>
    <label><input type="radio" name="radiogrp" value="NEW" onclick="setOptions('NEW')">NEW<label>
    <label><input type="radio" name="radiogrp" value="OLDNEW" onclick="setOptions('OLDNEW')">OLDNEW<label>
    <br/>
    
    <select name="list1" id="list1"></select>
    </body>
    </html>
    Finally, you should enclose your scripts between [ code] and [ /code] tags (without the spaces)
    to make it easier to view, copy and test your code by the forum members.

  8. #8
    Join Date
    Jan 2012
    Posts
    6
    I did populate my arrays..... see below. Hope I am doing this correct.
    -------------------------------------------------------------------
    var choicesADH = new Array();
    var choicesON = new Array();
    var choicesONADH = new Array();
    var choicesOTH = new Array();


    var x = document.getElementById('list1');
    alert(x.length);

    var i;
    for (i=0;i<x.length;i++)
    {

    if(x.options[i].text.indexOf('ADH') != -1 && x.options[i].text.indexOf('ON') == -1){
    //// Only "ADH" but no "ON" or "ONADH"
    choicesADH[i]=x.options[i].text;
    }
    ...
    -----------------------------------------------------------------------

    As regard the select options......I want to have it in the html and i want to use the the values from there to populate the arrays and then after filtering i wish to populate the select options in that html block. If you can thrown some light.

    Thanks

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Question

    Quote Originally Posted by simpledev View Post
    I did populate my arrays..... see below. Hope I am doing this correct.
    -------------------------------------------------------------------
    var choicesADH = new Array();
    var choicesON = new Array();
    var choicesONADH = new Array();
    var choicesOTH = new Array();


    var x = document.getElementById('list1');
    alert(x.length);

    var i;
    for (i=0;i<x.length;i++)
    {

    if(x.options[i].text.indexOf('ADH') != -1 && x.options[i].text.indexOf('ON') == -1){
    //// Only "ADH" but no "ON" or "ONADH"
    choicesADH[i]=x.options[i].text;
    }
    ...
    ...
    Thanks
    You may have tried to populate the arrays, but there is nothing in them when I looked.
    Take a look after the first display.

  10. #10
    Join Date
    Jan 2012
    Posts
    6
    Hello,
    Sorry for bothering you with this.

    I thought the earlier code will populate the arrays. I dont know how to do it but i wish i can achieve this and hence need help.

    Let me just rephrase what i want to achieve in a clear manner. Sorry if it was confusing the first time I posted.

    All i want to do here is a simple dropdown list which already has different values.
    And i want to filter it based on Radio button action (which passes the pattern)
    And then after filtering repopulate the dropdown list.
    I want to keep the dropdown/select options in the html itself (do not want to it to be created in javascript) but want the javascript function to control the dropdown. Can this be done.

    1. Radio Buton for "ALL" should list all initial values (default values) in the dropdown
    2. Radio Button for "ADH" should list only those values matching "ADH" and it should not include "ON" or even "ONADH"
    3. Radio Button for "ON" should list only those values matching "ON" and it should not include "ADH" or even "ONADH"
    4. Radio Button for "ONADH" should list only those values matching "ONADH" and it should not include "ADH" or even "ON"
    5. At any time Radio Button for "ALL" should list all the values in the dropdownlist.
    6. I want to keep the dropdown list with the initial values in the html code. Javascript function should just control the logic to display the required values on filtering.

    I am provinding below a code if you can help me to construct the function "filterList(pattern, list)" to make it workable I will be highly appreciate it.

    Here is the html code.
    -----------------------
    <html>
    <head>
    <title>Dropdown Filter</title>
    </head>
    <body>
    <script language="JavaScript" type="text/javascript">
    <!--
    function filterList(pattern, list){
    //????
    }
    // -->
    </script>
    <form name="form1">
    <input type="radio" name="radio1" value="LAN" onClick="filterList(this.value,this.form.select1)" /> ALL
    <input type="radio" name="radio1" value="ADH" onClick="filterList(this.value,this.form.select1)" /> ADH
    <input type="radio" name="radio1" value="ON" onClick="filterList(this.value,this.form.select1)" /> ON <br>
    <input type="radio" name="radio1" value="ONADH" onClick="filterList(this.value,this.form.select1)" /> ON <br>
    <select name="select1" id="mybox">
    <option value="LAN12">LAN12</option>
    <option value="LANADH12">LANADH12</option>
    <option value="LANON12">LANON12</option>
    <option value="LANONADH12">LANONADH12</option>
    <option value="LAN24">LAN24</option>
    <option value="LANADH24">LANADH24</option>
    <option value="LANON24">LANON24</option>
    <option value="LANONADH24">LANONADH24</option>
    <option value="LAN36">LAN36</option>
    <option value="LANADH36">LANADH36</option>
    <option value="LANON36">LANON36</option>
    <option value="LANONADH36">LANONADH36</option>
    </select>
    </form>
    </body>
    </html>

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Another attempt...

    I'm not sure why you are soliciting a javascript solution, but don't want to use JS to solve your problem.

    The following seems to pass all your requirements, but I needed to change the HTML slightly.
    If I cannot change the HTML and you don't want to use the JS provided, I'm not sure how much help I can be.

    But, as a final attempt, try this...
    Code:
    <html>
    <head>
    <title>Dropdown Filter</title>
    </head>
    <body>
    <script type="text/javascript">
    
    function filterList(filterPattern, SBox) {
      var pattern = filterPattern.split(':')  
      var tarr = [];
      var sel = document.getElementById(SBox);
      sel.options.length = 0;
      for (i=0; i<allOptions.length; i++) {  
        tarr = allOptions[i].split(':');
        if (tarr[0].indexOf(filterPattern) != -1) {
          sel.options[sel.options.length] = new Option(tarr[1],tarr[0],false,false);
        }
      }
      sel.selectedIndex = 0;
    }
    
    var allOptions = [];
    window.onload = function() {
      var obj = document.getElementById('mybox');
      for (var i=0; i<obj.options.length; i++) {
        allOptions.push(obj.options[i].value+':'+obj.options[i].innerHTML);
      }  //  alert(allOptions.join('\n'));
    }
    </script>
    <form name="form1">
    <label><input type="radio" name="radio1" value="LAN" onClick="filterList(this.value,'mybox')" checked /> ALL </label>
    <label><input type="radio" name="radio1" value="LANADH" onClick="filterList(this.value,'mybox')" /> ADH </label>
    <label><input type="radio" name="radio1" value="LANON" onClick="filterList(this.value,'mybox')" /> ON  </label>
    <label><input type="radio" name="radio1" value="LANBoth" onClick="filterList(this.value,'mybox')" /> ONADH  </label>
    <br>
    
    <select name="select1" id="mybox">
     <option value="LAN12">LAN12</option>
     <option value="LANADH12">LANADH12</option>
     <option value="LANON12">LANON12</option>
     <option value="LANBoth12">LANONADH12</option>
     <option value="LAN24">LAN24</option>
     <option value="LANADH24">LANADH24</option>
     <option value="LANON24">LANON24</option>
     <option value="LANBoth24">LANONADH24</option>
     <option value="LAN36">LAN36</option>
     <option value="LANADH36">LANADH36</option>
     <option value="LANON36">LANON36</option>
     <option value="LANBoth36">LANONADH36</option>
    </select>
    
    </form>
    </body>
    </html>

  12. #12
    Join Date
    Mar 2012
    Posts
    1
    Quote Originally Posted by JMRKER View Post
    I'm not sure why you are soliciting a javascript solution, but don't want to use JS to solve your problem.

    The following seems to pass all your requirements, but I needed to change the HTML slightly.
    If I cannot change the HTML and you don't want to use the JS provided, I'm not sure how much help I can be.

    But, as a final attempt, try this...

    Hi - this is cool and I have customised it using my own details. However, how do I have it so if someone selects LAN12 (using your example) it goes to www.anypage.com/lan12?

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles