Naveen Naveen - 4 months ago 21
Javascript Question

jQuery code to select three different options from a list with three drop downs?

I have three distinct dropdown boxes, each one contain a list that is common to that three boxes. My need is to filter the list like, WHEN USER SELECTS AN OPTION IN THE FIRST DROPDWN, THE HE GOES TO NEXT, IN THAT HE SHOULDN’T GET THE OPTION IN THE LIST THAT IS SELECTED EARLIER IN THE FIRST DROPDOWNenter image description here

<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>`

Answer
<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>

This code will work...