Javascript多選

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值。