使多个选择输入不包含任何先前输入的选定选项

Question

我们从一个选择菜单开始

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
<select>

使用按钮添加其他选项

<a href="javascript:;" class="AddNewField">Add Another</a>

复杂的部分...... -Updated

由于能够添加新选项和最大选项是多少，我不希望该人能够添加“选项1”六次，而新添加的选项将不具有所选的字段上一个选项，因此如果在第一个选项中选择3，那么在第二个选项中，您将看到仅显示选项1,2,4,5和6的列表。

此外，如果此人已经添加了另外两个意味着有三个选项在那里并且他们选择了1,2和3但是然后将第一个选项更改为4，我想要一个循环来取消选项4所有选项并将选项1添加回选项。

我希望这更清楚，我不仅对逻辑感到困惑，而且如何解释抱歉。

实施例

First Initial：

<select>
    <option>Option 1</option>
    <option>Option 2</option> // We have chosen this one...
    <option>Option 3</option>
    <option>Option 5</option>
    <option>Option 6</option>
<select>

第二次附加：

<select>
    <option>Option 1</option>
    <option>Option 3</option>
    <option>Option 4</option> // We have chosen this one so also removes from first input too
    <option>Option 5</option>
    <option>Option 6</option>
<select>

Answer 1

快速捅一下，添加剩余值的选项。

你走了。这是一个有趣的。希望代码足够清晰，可以阅读。

它允许添加与选项一样多的选择。它还允许更改任何以前的选项。

点击＆＃34;添加选项＆＃34;添加更多文字选择以下示例。

为清晰起见，已更新示例。

＆＃13;

＆＃13;

var values = getInitialValues();

function getInitialValues() {
  return $('select').first().find('option').toArray().map($).map(function($el) {
    return $el.text();
  });
}

function getSelectedValues() {
  return $('select').toArray().map($).map(function($el) {
    return $el[0].value;
  });
}

function makeOptions(values, selected) {
  return values.map(function(value) {
    if (value === selected) {
      return $('<option selected>' + value + '</option>');
    } else {
      return $('<option>' + value + '</option>');
    }
  });
}

function makeRemainingValues(all, used) {
  return all.filter(function(value) {
    return used.indexOf(value) < 0;
  }).sort();
}

function makeInput(values) {
  var inputEl = $('<select>');
  inputEl.append(makeOptions(values));
  return inputEl;
}

function refreshValues() {
  $('select').toArray().map($).forEach(function($el) {
    var remainingValues = makeRemainingValues(values, getSelectedValues());
    var value = $el[0].value;
    remainingValues = remainingValues.concat([value]).sort();
    $el.empty();
    $el.append(makeOptions(remainingValues, value));
  });
}

function logValues() {
  $('.remain').text( makeRemainingValues(values, getSelectedValues()).join(', ') );
}

logValues();

$(document).on('change', 'select', refreshValues);

$(document).on('change', 'select', logValues);

$(document).on('click', '#add', function() {
  if ( makeRemainingValues(values, getSelectedValues()).length > 0 ) {
    $('select').last().after(makeInput(makeRemainingValues(values, getSelectedValues())));
    refreshValues();
    logValues();
  }
});

$(document).on('click', '#rm', function() {
  var $selectors = $('select');
  if ($selectors.length > 1) {
    $('select').last().remove();
  }
  refreshValues();
  logValues();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add input</button>
<button id="rm">Remove input</button>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<p>Remaining options: <span class="remain"></span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我在评论中提到的一种可行的替代方法。它使用一个列表作为预选值，但您也可以使用仅包含所选值的新select元素，并将其设置为只读。

PS：这只是一个想法。可能性是无限的。顺便说一句，为什么不使用something like this而不是用户更友好。

var maxOptions = 3; // change this for maximum selection option.

$("#add").hide();
$("#options").on("change", function() {
  if ($("#selected li").length >= maxOptions - 1) {
    $("#add").hide();
  } else if ($("#add").is(":hidden")) {
    $("#add").show();
  }
});
$("#add").on("click", function() {
  var sel = $("#options option:selected");
  if (sel.val() != "") {
    $("#selected").append("<li>" + sel.val() + "<input name='" + $("#options").attr('name') + "' type='hidden' value='" + sel.val() + "' /> <span class='remove'>x</span></li>");
    sel.remove();
    $("#options>option:first").attr("selected", true);
  }
});
$("#selected").on("click", ".remove", function() {
  var val = $(this).siblings("input").val();
  $($(this).parents("li:first").remove());
  $("#options").append('<option value="' + val + '">' + val + '</option>');
  $("#add").show();
});

.option-group {
  width: 200px;
}
#selected {
  list-style-type: lower-alpha;
  background: cornsilk;
}
#selected li {
  padding: 5px;
}
#selected li:nth-child(odd) {
  background: antiquewhite;
}
#selected li:nth-child(even) {
  background: aliceblue;
}
.remove {
  float: right;
  cursor: pointer;
  display: none;
}
#selected li:hover>.remove {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="option-group">
  <ol id="selected">
  </ol>
  <select id="options" name="options[]" required>
    <option disabled selected value="">Select Any</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <button id="add" type="button">Add more</button>
</div>