進行多個不包含任何先前輸入的選定選項的選擇輸入

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> 

Answer 2

正如我在評論中提到的，這是一種可行的替代方法。 它使用一個列表列出預選的值，但是您也可以將新的select元素僅使用選定的值並將其設置為只讀。

PS：這只是一個想法。 可能性是無限的。 順便說一句，你為什么不使用這樣的東西，而是更用戶友好。

 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>