2014-07-07 152 views
-1

傢伙,我想知道是否有這個辦法:HTML選擇標記,決定下一個選擇選項

例如,如果在選擇標籤的第一個問題是「汽車品牌」。那麼你選擇例如「豐田」。下一個選項的下一個選項是豐田汽車的列表,如「凱美瑞,fortuner等」。如果在第一次選擇時選擇「本田」,則下一個選擇選項將具有「公民,crz,crv等」。

基本上,下一個選擇標籤會根據所選的第一個選項切換選項。而最大的問題是如果代碼僅用於HTML而不用於CSS。預先感謝您的回覆:)

+0

HTML僅是不可能的。在第一個選擇上定義onselect,然後你可以使用AJAX(XHR)將選項填充到第二個選擇中,或者預先加載所有選項,只顯示相應的選項並隱藏其他選項。第一個更好,第二個沒有AJAX。 – mikiqex

+0

這實際上是使用javascript完成的,因爲您想要動態更改頁面上出現的下一個選擇選項。如果你試圖自己做,然後只問你的代碼是否有問題,那就更好了。 – Grapho

回答

0

一些JavaScript開始 - 每次選擇框更改它將匹配所選值與「模型」對象中的值,並在模型選擇框中顯示結果。

Fiddle

<select id="makes"> 
    <option value="NULL">Please Select</option> 
    <option value="Honda">Honda</option> 
    <option value="Toyota">Toyota</option> 
</select> 




<select id="model"> 
</select> 



$(function(){ 
    $('#makes').change(function(){ 
     var make = $(this).val(); 
     var model = { 
      Honda:{1:"Civic", 2:"Accord"}, 
      Toyota:{1:"Supra",2:"Yaris"} 
     }; 


     if(model.hasOwnProperty(make)){ 
      $('#model').html(''); 

      $.each(model[make], function(i, val) { 
       $('#model') 
        .append($("<option></option>") 
        .attr("value",val) 
        .text(val)); 
      }); 
     } 
    }); 
}); 
相關問題