Create new drop downs on change event using jQuery

Question

I have drop down menu with some random values. When I select the value onchange event triggers and I want to add new drop down under it, but the new one should have all values except selected one in first drop down. Now when I change value of second one, I need third one that has only non selected values from previous two drop downs and so on until there is no more option to select.

What I have for now is mechanism for adding new drop downs, but it is not working correctly. If I for example select first value it will do the job, new drop down is shown and it has all options except selected one. But then if I go back and try to change option for first drop down third drop down is created. This should not be a case, if drop down already created another drop down it should not do it again. Is it even possible to avoid triggering of new onchange event for drop down that already triggered one? Or maybe some other kind of event is more suitable for this case?

This is my function that does described job:

createNewDropDonws : function() {
    var selectWrapper = $('#select-boxes');
    $(document).on('change', '.dynamic-select', function() {
        var element = $(this);
        var optionsLength = (element.find('option').length) - 1;

        if(optionsLength === 1) {
        return true;
        }

        var newSelect = $(this).clone();
        newSelect.find("option[value='" + element.val() + "']").remove();
        newSelect.appendTo(selectWrapper)
    });
}

This is my HTML for drop down:

<div id="select-boxes">
    <select class="dynamic-select" id="ddlTest">
      <option value=""></option>
      <option value="Belbin">Belbin</option>
      <option value="Raven">Raven</option>
      <option value="PPA">PPA</option>
      <option value="PPA+">PPA+</option>
      <option value="Basic Knowledge">Basic Knowledge</option>
      <option value="PCT">PCT</option>
    </select>
  </div>

And this is simple CSS class:

.dynamic-select{
  display: block;
  margin: 10px;
  }

Does anybody has any idea how this can be implemented correctly by using jQuery?

Answer 1

We can do it in following way:

We are just adding some class like executed once it add another dropdown. And in event handler we are checking if current dropdwon has that class or not. If it is already there then it means we are already done with that dropdown as follows:

$(document).ready(function() {
  var selectWrapper = $('#select-boxes');
  $(document).on('change', '.dynamic-select', function() {
    var element = $(this);
    if(element.hasClass("executed"))
      return;
    
    var optionsLength = (element.find('option').length) - 1;

    if (optionsLength === 1) {
      return true;
    }

    var newSelect = $(this).clone();
    newSelect.find("option[value='" + element.val() + "']").remove();
    newSelect.appendTo(selectWrapper)
    
    $(this).addClass("executed");
    
  });
});

.dynamic-select {
  display: block;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="select-boxes">
  <select class="dynamic-select" id="ddlTest">
    <option value=""></option>
    <option value="Belbin">Belbin</option>
    <option value="Raven">Raven</option>
    <option value="PPA">PPA</option>
    <option value="PPA+">PPA+</option>
    <option value="Basic Knowledge">Basic Knowledge</option>
    <option value="PCT">PCT</option>
  </select>
</div>