javascript - 进行不包含任何先前输入的选定选项的多个选择输入

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>

复杂的部分...-已更新

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

此外，如果该人添加了另外两个，意味着上面有三个选项，并且他们选择了 1、2 和 3，但随后将第一个选项更改为 4，我想要一个循环来删除选项 4所有选项并将选项 1 添加回选项中。

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

示例:

第一个首字母:

<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

快速尝试一下，添加具有剩余值的选项。

给你。这很有趣。希望代码足够清晰易读。

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

点击“添加选项”文本添加更多选项，如下例所示。

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

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

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