2013-12-13 50 views
2

我會盡量做到儘可能具體。Html和javascript <select>標籤有過濾

所以我需要創建一個選擇器來篩選選項。

我:

  1. 車型
  2. 在那裏你可以駕駛這些車的地方。

因此,舉例來說,你會選擇>法拉利>然後在第二個選擇標籤顯示正確地區可達

即選擇>法拉利=倫敦,劍橋,德文郡,新罕布什爾州

Select > Lamborghini = London, Bertshire, Oakwood, 

然後終於

他們選擇(法拉利+劍橋),然後按「走出去」,並跳轉到最後一個環節,將採取他們正確的頁面。

我的代碼是:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script> 

<script type='text/javascript'>//<![CDATA[ 




$('#filter-regions').on('click', function() { 
    var pilotage-carFilter = $('#pilotage-car').text(); 
    var itemFilter = $('#items').text(); 

    console.log('pilotage-carFilter: ' + pilotage-carFilter); 
    console.log('itemFilter : ' + itemFilter); 
    console.log('Applying filter now...'); 

    featureList.filter(function(item) { 
     console.log('Running filter() on item: ('+item+')'); 
     console.log('item.values().pilotage-car: ' + item.values().pilotage-car); 
     console.log('item.values().item: ' + item.values().item); 

     return 
      (pilotage-carFilter==='Ferrari' || item.values().pilotage-car === pilotage-carFilter) 
      && (itemFilter==='All items' || item.values().item === itemFilter); 
    }); 

    return false; 
}); 



//]]> 

</script> 


</head> 

<body> 

<form id="filter"> 
<select id="pilotage-car" name="pilotage-car" size="1"> 
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-BN-5iZ5.aspx?SqNo=5iZ5&cm_sp=LHN-_-Voiture-_-Ferrari&cm_re=Ferrari-_-Voiture-_-LHN">Ferrari</option> 
<option value="Porsche">Porsche</option> 
<option value="Lamborghini" selected>Lamborghini</option> 
<option value="Mustang">Mustang</option> 
<option value="Audi" selected>Audi</option> 
<option value="Multivolants">Multivolants</option> 
<option value="Rallye">Rallye</option> 
<option value="Subaru">Subaru</option> 
<option value="Karting">Karting</option> 
<option value="4x4">4x4</option> 
<option value="Moto">Moto</option> 
<option value="Quad">Quad</option> 
<option value="Buggy">Buggy</option> 
<option value="Renault Sport">Renault Sport</option> 
<option value="Prototype">Prototype</option> 
<option value="Chevrolet">Chevrolet</option> 
<option value="Corvette">Corvette</option> 
</select> 

<select id="items" name="items" size="1"> 
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-Alsace-BN-5iZ5Z1z13skq.aspx?SqNo=5iZ5Z1z13skq&cm_sp=LHN-_-Region-_-Alsace&cm_re=Alsace-_-Region">A l'&eacute;tranger</option> 
<option value="Alsace">Alsace</option> 
<option value="Aquitaine" selected>Aquitaine</option> 
<option value="Auvergne">Auvergne</option> 
<option value="Basse-Normandie" selected>Basse-Normandie</option> 
<option value="Bourgogne">Bourgogne</option> 
<option value="Bretagne">Bretagne</option> 
<option value="Centre">Centre</option> 
<option value="Champagne-Ardenne">Champagne-Ardenne</option> 
<option value="Franche-Comt&eacute;">Franche-Comt&eacute;</option> 
<option value="Haute-Normandie">Haute-Normandie</option> 
<option value="Ile-de-France">Ile-de-France</option> 
<option value="Languedoc-Roussillon">Languedoc-Roussillon</option> 
<option value="Limousin">Limousin</option> 
<option value="Lorraine">Lorraine</option> 
<option value="Midi-Pyr&eacute;n&eacute;es">Midi-Pyr&eacute;n&eacute;es</option> 
<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option> 
<option value="Pays de la Loire">Pays de la Loire</option> 
<option value="Picardie">Picardie</option> 
<option value="Poitou-Charentes">Poitou-Charentes</option> 
<option value="Provence-Alpes-C&ocirc;te d'Azur">Provence-Alpes-C&ocirc;te d'Azur</option> 
<option value="Rh&ocirc;ne-Alpes">Rh&ocirc;ne-Alpes</option> 
</select> 




<input id="go-button" type="button" name="test" value="Go"/> 
</form> 

我真的不知道關於JavaScript的。

我怎麼能和/或什麼是我能達到這個目標的最佳方式?那裏有沒有例子?

編輯︰我發現這樣的事情http://jsfiddle.net/dtAgX/1/ 但我需要一個sumbit按鈕,將鏈接到基於選擇的正確頁面。

在此先感謝

+0

那麼最新的問題?這個網站不是爲了收集代碼,而是爲了獲得某個特定問題的幫助 – mercsen

+0

對不起,我的問題基本上是如何讓一個選擇器可以像我在前面解釋的幾個句子一樣執行? – user3099325

回答

0

您有幾種選擇取決於你的後臺,PHP,ASP等。或純HTML。 如果您使用PHP/ASP,您可以爲您提供「操作」和「方法」,並讓服務器提供正確的頁面,具體取決於您所選擇的值。

如果您使用純HTML,您可以向您的「onsubmit」事件添加一個JavaScript重定向到正確的頁面。

在這兩種情況下,「按鈕」應該是「提交」類型。

如果你想要更多的幫助,我需要更多地瞭解您的設置:-)

而且,可以全車所有位置的驅動?

+0

嗨,謝謝。網站即時通訊http://www.coolcadeau.fr/他們實際上使用aspx。只有某些汽車可以在某些情況下駕駛。希望這有助於:) – user3099325

+0

看看[鏈接](http://jsfiddle.net/3yKJ7/3/) 對不起,我不是很好與aspx。 函數update1將修改在第二次選擇時有效的選項。在這裏你應該插入你自己的腳本。 – Jonas

+0

嗨,謝謝你。它把事情放在更好的角度。但我在哪裏添加所有鏈接? – user3099325