2016-07-08 9 views
-5

私は3つの異なるドロップダウンボックスを持っています。それぞれには、その3つのボックスに共通するリストが含まれています。私の必要性は、最初に 先に選択されている彼は、リストのインクルード内のオプションを取得するべきではありません、ユーザーが最初のドロップダウンでオプションを選択したときに 3つのドロップダウンを持つリストから3つの異なるオプションを選択するjQueryコード?

、その後、彼は次の に行く、などのリストをフィルタリングすることです落ちる。

これは2つのドロップダウンを示す画像です.3つが必要です。
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。私はそれを持っている。問題を起こして申し訳ありません。私はこれが初めてだから。忍耐力に感謝します。 –

関連する問題