Question

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

如果用户选择了一个可选选项，我希望显示一个新的选择，等等，直到没有其他选项。

选项还需要（这是我的问题）在每个选择之间同步。我有这个代码：

HTML

<form action="">
<select name="primary" id="primary">
</select>
<br/>
<div id="optional" style="display: none">
    <button id="addField">Add field</button>
    <br/>
</div>
</form>

JS

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

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

任何人都知道我会怎么做那样的事情？

Answer 1

我为您演示了HERE

的示例

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

HTML：

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

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

UPDATED FIDDLE

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

创建新的<select>而不使用先前使用的值</select>

1 个答案: