javascript - 向多个选择元素添加新选项问题

Question

我有一个表单，用户可以在其中选择他们想要停留的几个地点，并且必须指定他们将在每个地点停留的时间，但首先，他们必须输入他们一般要停留的天数例如，在每个地点，如果我想在两个地点停留 2 天，第一个地点停留 2 天，第二个地点停留 3 天，我必须先输入 5 天，然后选择我想要停留的地点，并为每个地点指定如何停留很多天我都想去那里。问题是，为了防止用户为某个位置输入错误的天数，我为每个位置创建了一个选择元素，因此当用户输入一般天数时，我会用该信息填充选择元素(选项从 1到天数)，效果很好，但是当用户选择一个位置并指定该位置的天数时，我希望其余的选择元素填充剩余天数，所以我使用此代码来做到这一点

function fillUpSelects2(start, top, who) {

    var optionArray = new Array();

    // create the new options
    for (var i = 1; i <= top; i++) {
        optionArray.push(new Option(i, i));
    }

    // get all the select elements
    var selects = jQuery("select.estanciaselect");

    // loop through the selects to change their content
    for (var i = 0; i < selects.length; i++) {

        // if selects[i] is not the one who triggered the change event
        if (selects[i].getAttribute('id') != who) {

            // then I erase all its options
            selects[i].options.length = 0;

            //and here is where it is supposed to add the new options
            for (var j = 0; j < optionArray.length; j++) {
               selects[i].options[selects[i].options.length] = optionArray[j];
            }
        }
    }
}

当我运行这个时，所有选择最终都是空的，但最后一个被正确填充

Answer 1

如果您使用 jQuery，您不妨使用它来附加它们:

for (var i = 1; i <= top; i++) {
    $(".selects").prepend($("<option>")
                              .val(i)       // Might have to use .attr("value", i) instead
                              .html(i));
}

这是一个 jsFiddle，演示了您可以使用的两个选项(包括上面的选项)，但还有更多:

http://jsfiddle.net/tRHYk/