2016-07-08 45 views
-5

我有三個不同的下拉框,每個下拉框都包含一個與三個框共用的列表。我需要的是過濾列表一樣,jQuery代碼從三個下拉列表中選擇三個不同的選項?

當用戶選擇第一個下拉列表選項,然後他去 未來,他不應該在列表中的選項是處於第一種早期選擇 落下。

這是顯示兩個下拉的圖像,我需要其中的三個。
this is the image for two ddwns, but actully i need three of it.

<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function cleanMonth(ddl) { 
      var val = ddl.options[ddl.selectedIndex].value; 

     //Clear all items 
     $("#ddlMonth2 > option").remove(); 

     //Add all options from dropdown 1 
     $("#" + ddl.id + "> option").each(function() { 
      var opt = document.createElement("option"); 
      opt.text = this.text; 
      opt.value = this.value; 
      document.getElementById("ddlMonth2").options.add(opt); 
     }); 

     //Remove selected 
     $("#ddlMonth2 option[value='" + val + "']").remove(); 
    } 
</script> 
+2

好了,和你有什麼企圖? – Epodax

+0

請不要大聲喧譁。也許有更合適的格式選項... – mnille

+0

這是我的代碼.. –

回答

0
<html> 
<head> 
    <title>Dropdown test</title> 
</head> 
<body> 
    <select id="first"> 
    <option value="0">--Select--</option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    </select> 
    <select id="second"> 
    <option value="0">--Select--</option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    </select> 
    <select id="third"> 
    <option value="0">--Select--</option> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    </select> 

</body> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 


<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#first").on('change',function(){ 
      var selectedItem = $("#first").val(); 
      $("#second").children("option").show(); 
      $("#second").children("option[value^=" + selectedItem + "]").hide(); 
     }); 
     $("#first ,#second").on('change',function(){ 
      var selectedItem = $("#first").val(); 
      var selectedItem2 = $("#second").val(); 
      $("#third").children("option").show(); 
      $("#third").children("option[value^=" + selectedItem + "]").hide(); 
      $("#third").children("option[value^=" + selectedItem2 + "]").hide(); 
     }); 
    }); 
</script> 

</html> 

這段代碼工作...

+0

非常感謝。 @Apmeena。我已經知道了。對不起,造成麻煩。因爲我對此很陌生。感謝耐心。 –

相關問題