从下拉列表中获取所有值，除了JavaScript中选中的值

Get all values from drop down except selected one in JavaScript

本文关键字：除了 JavaScript 下拉列表 获取      更新时间：2023-09-26

我有一些随机值的下拉菜单。当我选择的值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);
}

获取所有选项，除了与select(因为它被选中)具有相同值的选项，克隆它们，并附加到新的select

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);

小提琴

您可以根据需要修改此代码。

$(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>

相关文章：