Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy javascript <select> tags with filtering

    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:
    <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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,594
    Thanks
    23
    Thanked 646 Times in 645 Posts
    To get this to work for you, you need a database. In that DB you need a row each for the cars and in that row you need to have the regions (places) where the car can run. You also need to know ajax. When a car is selected ajax sends this info to a server side file that will read the data from the DB and send it back so the second dropdown can be populated with that info. This filters the places for you.

    As to the dropdowns and form that you have now.
    You do not need any of the jquery you have now.
    Use a name attribute on both
    Code:
    <select id="select1" name="select1">
    This will be sent to my_page.aspx and you can see it in the address bar.
    You should see my_page.aspx?select1=1&select2=Alsace there when the submit button is clicked. Will work this way when ajax is used for second DD.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>text demo</title>
    </head>
    
    <body>
    <form method="get" action="my_page.aspx">
    <select id="select1" name="select1">
        <option value="0">Ferrari</option>
        <option value="1">Porsche</option>
        <option value="2">Lamborghini</option>
    </select>
    <select id="select2" name="select2">
        <option data-group="1">A l'&eacute;tranger</option><!-- I'D USE value INSTEAD OF data-group   -->
        <option data-group="1">Alsace</option>
    </select>
    <input type="submit" value="Go" />
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    To get this to work for you, you need a database. In that DB you need a row each for the cars and in that row you need to have the regions (places) where the car can run. You also need to know ajax. When a car is selected ajax sends this info to a server side file that will read the data from the DB and send it back so the second dropdown can be populated with that info. This filters the places for you.

    Hi thanks for this.

    Im sure this would be easier, but i was told to do it using the javascript way so i can just embed it onto the site and it would work. My mistake for having "my_page.aspx" in the code, i think that's confusing.

    What I want is just to have:

    1. The first thing is - If i select Ferrari, only the right places available should show up. If i select Lamborghini - only the right places show up for that.
    All the other places unavailable for those are hidden (or un-clickable)

    2. Second is > if select Ferrari + Alsace > make this link = "http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-Alsace-BN-5iZ5Z1z13skq.aspx"

    if select Lamborghini + Alsace > make this link = "http://www.coolcadeau.fr/Stage-de-pilotage-Lamborghini-Alsace-BN-5iZ6Z1z13skq.aspx"

    Then > hit "go" button > takes user to the page/link


    Thanks for your help


  •  

    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
    •