Javascript 创建新的，而不使用以前使用的值

我在第一个“选择”中有一个可用选项列表，它应该是主选项。 然后我希望用户选择可选选项，这样当他选择第一个选项时，会添加一个新的选择，显示剩余的可用选项

如果用户选择一个可选选项，我希望显示一个新的选择，等等，直到没有更多的选项

这些选项也需要在每个选择之间同步，这是我的问题。 我有这个密码：

html

js

我很难重新加载每个select，因为空函数可以工作，但我丢失了以前选择的选项。我可以保存它，然后重新加载它等等，但我不确定这是不是正确的方法

---

有人知道我会怎么做吗

我已经写了一个示例供您演示

基本上，这个想法是当您更改下拉列表时，获取未选择的选项，创建一个新的选择，并附加这些选项。我还添加了一行，以从初始选择中删除这些选项。如果不需要，您可以将其删除

html:

jquery

$(document).ready(function() {
    var index = 2;
    $(document).on('change', '.select', function () {
        var id = $(this).attr('id');
        var options = $('#' + id + ' option:not(:selected)').clone();
        //$('#' + id + ' option:not(:selected)').remove();
        $('#container').append('<select id="select-' + index + '" class="select"></select>')
        $('#select-' + index).append(options);
        index++;
    });
});

---

这可能需要一些调整，比如移动选项，但应该可以开始了

可以使用jQuery吗？如果答案有帮助，我想让我知道这会更容易。我尝试对$+id+'选项：not:selected.进行注释。删除；但一旦选择了一个选项，它仍然不会显示所有选项。如果需要，我希望可以更改。对不起，这是因为选项没有克隆，我更新了链接，再次单击尝试。这样做可以为您解决问题吗？这更好，但我最大的问题仍然是：使用您提供的和更新的小提琴，如果我选择“二”，我将有一个新的选择，选项减去“二”，这很好。在第二次选择中，如果我选择“三”并选中第一次选择，则三仍然可用。事实上，我在我的原始代码中尝试了一个“None selected”（未选择）选项，该选项的作用类似于重置并重新启用以前选择并禁用的所选选项。hmm。。我明白了，您希望能够撤消以前所做的选择并使其在第一次选择中重新出现吗？

var counter = 0;
var selects = [];
var categories = JSON.parse('[ { "value": "", "label": "Aucune", "taken": false }, { "value": "Électronique/Électroménager", "label": "Électronique/Électroménager", "taken": false }, { "value": "Maison Jardin", "label": "Maison Jardin", "taken": false } ]');

function addField() {
    $("#optional").append("<select name='optional' id='secondary" + counter + "'></select>");
    var jid = $("#secondary" + counter);
    fill(jid);
    jid.on("click", function () {
        updateCat(jid.val());
    });
    selects.push(jid);
    counter++;
}

function fill(select) {
    console.warn("select");
    //select.empty();
    console.groupCollapsed();
    for (var cat in categories) {
        console.log(categories[cat].label + " -> " + categories[cat].taken);
        if (!categories[cat].taken) {
            select.append("<option value=" + categories[cat].value + ">" + categories[cat].label + "</option>");
        }
    }
    console.groupEnd();
}

function updateCat(cat) {
    console.warn("update "+cat);
    var catId = findCat(cat);
    if (catId != -1) {
        categories[catId].taken = true;
    }
    for (var s in selects) {
        fill(selects[s]);
    }
}

function findCat(cat) {
    for (var i = 0; i < categories.length; i++) {
        if (categories[i].label == cat) {
            return i;
        }
    }
    return -1;
}

$(function () {
    var primary = $("#primary"), optional = $("#optional"), buttonField = $("#addField");
    fill(primary);
    selects.push(primary);
    primary.on("click", function () {
        if (primary.val() !== "") {
            updateCat(primary.val());
            optional.css("display", "block");
            buttonField.on("click", function (e) {
                e.preventDefault();
                addField();
            });
        }
        else {
            buttonField.css("display", "none");
        }
    })
});

<div id='container'>
  <select id='select-1' class='select'>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
  </select>
</div>

$(document).ready(function() {
    var index = 2;
    $(document).on('change', '.select', function () {
        var id = $(this).attr('id');
        var options = $('#' + id + ' option:not(:selected)').clone();
        //$('#' + id + ' option:not(:selected)').remove();
        $('#container').append('<select id="select-' + index + '" class="select"></select>')
        $('#select-' + index).append(options);
        index++;
    });
});