從下拉列表中獲取所有值，但在JavaScript中選擇的除外

Question

我有一些隨機值的下拉菜單。 當我選擇值onchange事件觸發器時，我想在其下添加新的下拉菜單，但是新的下拉菜單應具有除第一個下拉菜單中選擇的一個之外的所有值。 現在，當我更改第二個值時，我需要第三個值中只有前兩個下拉列表中未選擇的值。 在JavaScript中最簡單的方法是什么？

我現在擁有的是添加新下拉菜單的機制，但是現在我用一些虛擬數據填充了它。 我需要實現可以調用的函數，而不是dateGenerate（）

我必須解決這個問題而不使用jQuery :(

這是HTML：

Test:<br>
<select id="ddlTest" onchange="addNewTestDrop('newTest');">
  <option value=""></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 id="newTest">
</div> 

這是我擁有的javaScript：

    function dateGenerate() {
      var date = new Date(), dateArray = new Array(), i;
      curYear = date.getFullYear();
        for(i = 0; i<5; i++) {
            dateArray[i] = curYear+i;
        }
        return dateArray;
    }

    function addNewTestDrop(divname) {
        var newDiv=document.createElement('div');
        var html = '<select>', dates = dateGenerate(), i;
        for(i = 0; i < dates.length; i++) {
            html += "<option value='"+dates[i]+"'>"+dates[i]+"</option>";
        }
        html += '</select>';
        newDiv.innerHTML= html;
        document.getElementById(divname).appendChild(newDiv);
}

Answer 1

獲取除選項與選擇（具有所選值）相同的值以外的所有選項，克隆它們，並將其追加到新選擇中

document.getElementById('ddlTest').addEventListener('change', function() {
    var newSelect = document.createElement('select');

    var options = [].slice.call(this.querySelectorAll('option')).forEach(function(elem) {
        if (this.value !== elem.value) newSelect.appendChild(elem.cloneNode(true))
    }.bind(this));

    document.getElementById('newTest').appendChild(newSelect);
}, false);

小提琴

Answer 2

您可以根據需要修改此代碼。

 $(document).ready(function() { var selectWrapper = $('#select-boxes'); $(document).on('change', '.dynamic-select', function() { var element = $(this); var optionsLength = (element.find('option').length) - 1; // because we have an empty option if(optionsLength === 1) { return true; } var newSelect = $(this).clone(); newSelect.find("option[value='" + element.val() + "']").remove(); newSelect.appendTo(selectWrapper) }); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="select-boxes"> <select class="dynamic-select"> <option value=""></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>