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.