2016-07-08 43 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。我已经知道了。对不起,造成麻烦。因为我对此很陌生。感谢耐心。 –

相关问题