Question

鉴于以下HTML选择：

<select id="HtmlSelect1">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select id="HtmlSelect2">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select id="HtmlSelect3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
</select>

<select id="HtmlSelect4">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4" selected="selected">4</option>
</select>

场景1：如果我将HtmlSelect4中的选定值更改为2，则HtmlSelect2的选定值应更改为3，并且HtmlSelect3的选定值应更改为4.

场景2：如果我将HtmlSelect2的选定值更改为3，则HtmlSelect3的选定值应更改为2.

总之，我正在根据其他一个下拉列表重新排序其他下拉列表的选定值。如何在JavaScript中完成此操作？

注意：下拉列表和选项的数量可能会有所不同，因为它们是由数据库中的数据驱动的。

以下是我尝试过的，理论上应该适用于方案1，但没有。这是我想要做的方向的开始。

<script>
        function SelectChange(selectControl)
        {
            var controlDiv = document.getElementById("SomeDiv");
            var controlSelects = controlDiv.getElementsByTagName("select");
            for (var selectIndex = 0; selectIndex < controlSelects.length; selectIndex++)
            {
                if (controlSelects[selectIndex].id.indexOf("SelectControlPrefix") != -1)
                {
                    if (controlSelects[selectIndex].value >= selectControl.value)
                    {
                        for (var optionIndex = 0; optionIndex < controlSelects[selectIndex].options.length; optionIndex++)
                        {
                            if (controlSelects[selectIndex].options[optionIndex].value == controlSelects[selectIndex].options.value + 1)
                            {
                                controlSelects[selectIndex].options[optionIndex].selected = "selected";
                            }
                        }
                    }
                }
            }
        }
    </script>

Answer 1

我在理解预期的行为方面遇到了一些麻烦，因此我将在函数中抽象出来（ Update 2 按预期工作;添加一些注释以更好地解释我的解决方案）：

/* Returns a list of pairs [#element, value] to be updated */
function myBehaviour(n,o,v) {
    var ret = [["#HtmlSelect" + n, v]]; // The new value should be what the user selected
    // Shifts the other values, to the left of right
    while ( n > o ) {
        var next = $("#HtmlSelect" + (o+1));
        ret.push(["#HtmlSelect" + o, next.val()]);
        o++;
    }
    while ( n < o ) {
        var next = $("#HtmlSelect" + (o-1));
        ret.push(["#HtmlSelect" + o, next.val()]);
        o--;
    }
    return ret;
}

那就是说，你可以用jQuery来实现这个目标：

var old;
$("select").focus(function() {
    old = $(this).val(); // Saves the old value, before the change
}).change(function(e) {
    var newValue = $(this).val(); // Save the new value
    $(this).val(old); // Reverts to old, will change later

    var oldPosition = parseInt(findOld(newValue)); // Find where the old value was
    var newPosition = parseInt(this.id.substring("HtmlSelect".length));
    $.each(myBehaviour(newPosition,oldPosition,newValue), function(i,pair) {
        $(pair[0]).val(pair[1]); // Updates all them only after the correct positions were found
    });
    old = $(this).val(); // Saves the old again, in case the select is changed again
});

function findOld(value) {
    return $("select").filter(function() {
        return $(this).val() == value;
    }).attr("id").substring("HtmlSelect".length);
}

如果您需要纯JavaScript，代码会更长一些，但可以使用document.getElementById，onchange，childNodes，nodeValue等来实现。< / p>

HTML选择值通过JavaScript重新排序

1 个答案: