Question

我目前有以下功能（请参阅链接：http://jsfiddle.net/eUDRV/3/），而不是将所选值附加回原始列表，我想将它们返回到之前所在的位置。我的值按字母顺序排列。我知道我需要索引每个值的位置，但我不太确定如何实现这一点。任何帮助将不胜感激，谢谢。

这是我的HTML代码：

<section class="container">
<div>
    <select id="leftValues" size="5" multiple></select>
</div>
<div>
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
    <select id="rightValues" size="4" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div>
        <input type="text" id="txtRight" />
    </div>
</div>

Javascript代码：

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
});

$("#rightValues").change(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#txtRight").val(selectedItem.text());
});

CSS代码：

SELECT, INPUT[type="text"] {
    width: 160px;
    box-sizing: border-box;
}
SECTION {
    padding: 8px;
    background-color: #f0f0f0;
    overflow: auto;
}
SECTION > DIV {
    float: left;
    padding: 4px;
}
SECTION > DIV + DIV {
    width: 40px;
    text-align: center;
}

Answer 1

您可以在选择与文本对应的值属性中分配每个选项，然后在代码中分配：

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

您可以让它查找所选项目的值，将其与列表中的任何内容进行比较，并将其放在该列表中的相应索引中，并对将其移回右侧列表的代码执行相同操作。

如果您不想添加value属性，也可以删除该选项的innerHTML值。

Javascript多选

1 个答案: