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

获取所有选项，除了与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);

FIDDLE

Answer 2

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

＆＃13;

$(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)
  });
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

从JavaScript中获取所有值，除了在JavaScript中选择的值

2 个答案: