www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript for the select tags - combining filters

  1. #1
    Join Date
    Dec 2013
    Posts
    1

    Unhappy Javascript for the select tags - combining filters

    Hi

    I am totally new to javascript and have no clue whatsoever.
    So there is this site coolcadeau (french website)

    If you see on the left side are selections for type of cars- i.e. ferrari, lambo etc.

    Also on the left is the regions/areas where you can drive that car. I.e. - Paris, Normandie etc.

    There basically filters. Some cars like ferrari you can drive in certain areas, other cars in different areas. Some with even the same areas.

    I trying to build a javascript where the user can select the cars and areas with the dropdown <select> tags and the script will combine & filter the links - and when they press the submit "go" button - takes them there.

    Now for the links:

    you have example /Stage-de-pilotage-BN-5i.aspx . So 5i is the specific code for all the products in Pilotage, and every time you add a filter inside this category another combination of characters and numbers will be added to it.
    As in the case of Ferrari - which is the selection of one filter inside pilotage - you will have BN-5iZ5.aspx so, the code for Ferrari is 5. Same thing for Regions, if after selecting Ferrari you want to select all the Ferrari experiences in Albi, the url bit where the filters are defined, will be BN-5iZ5Z1e.aspx , so the code for Albi is 1e.
    The Z is there only to join the filters and has no value.

    -----------

    Phew

    So my code so far is:

    Code:

    HTML Code:
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
    
    <script type='text/javascript'>
    
    $( document ).ready(function() {
    
    
    $( "#select1" ).change(function() {
    var selectedValue = $(this).find(":selected").val();
    $( "#select2 option" ).each(function( key, value ) {
    console.log($(this).data('group'));
    console.log(selectedValue);
    
      if($(this).data('group').toString() == selectedValue.toString())
      {
      	$(this).removeAttr( "disabled" )
      }
      else
      {
      $(this).attr('disabled', true);
      }
    });
    });
    
    });
    
    </script>
    </head>
    
    <body>
    
    
    <form method="get" action="my_page.aspx">
    <select id="select1">
    
        <option value="0">Ferrari</option>
        <option value="1">Porsche</option>
        <option value="2">Lamborghini</option>
        <option value="3">Mustang</option>
        <option value="4">4x4</option>
        <option value="5">Buggy</option>
        <option value="6">Renault</option>
        <option value="7">sports car</option>
        <option value="8">truck</option>
        <option value="9">rally car</option>
        <option value="10">Formula 1</option>
    	
    </select>
    <select id="select2">
        <option data-group="1">A l'&eacute;tranger</option>
        <option data-group="1">Alsace</option>
        <option data-group="1">Aquitaine</option>
        <option data-group="4">Auvergne</option>
        <option data-group="5">Basse-Normandie</option>
        <option data-group="6">Bourgogne</option>
        <option data-group="7">Bretagne</option>
        <option data-group="8">Centre</option>
        <option data-group="9">Champagne-Ardenne</option>
    	<option data-group="10">Franche-Comt&eacute;</option>
    <option data-group="11">Haute-Normandie</option>
    <option data-group="12">Ile-de-France</option>
        <option data-group="13">Languedoc-Roussillon</option>
    <option data-group="14">Limousin</option>
    <option data-group="15">Lorraine</option>
    <option data-group="16">Midi-Pyr&eacute;n&eacute;es</option>
    <option data-group="17">Nord-Pas-de-Calais</option>
    <option data-group="18">Pays de la Loire</option>
    <option data-group="19">Picardie</option>
    <option data-group="20">Poitou-Charentes</option>
    <option data-group="21">Provence-Alpes-C&ocirc;te d'Azur</option>
    <option data-group="22">Rh&ocirc;ne-Alpes</option>
    </select> 
    
     <input type="submit" value="Go" />
    
        </form>
    What is difficult for me is grouping the regions to multiple groups/cars, and hiding the regions that are not available for certain cars. And on top of all of that grouping the links together to make the right link for the go button.

    How do I possibly do this?

    Your help in advance will be much appreciated. And i will love you forever.

    Thank you.

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

    Lightbulb

    See if you can modify post #5
    of: http://www.webdeveloper.com/forum/sh...ing-select-tag
    to fit your needs.

    Good luck!

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