Как получить значения из нескольких выберите поле MVC

Question

Я хочу, чтобы получить значения в левой и правой Mutli SELCT поле после того, как перенесение делается .Это HTML-код

<section class="container"> 
<div> 
    <select id="leftValues" name="leftValues[]" size="5" multiple> 
    <option value="a">1</option> 
    <option value="b">2</option> 
    <option value="c">3</option> 
    </select> 
</div> 
<div> 
    <input type="button" id="btnLeft" value="&lt;&lt;" /> 
    <input type="button" id="btnRight" value="&gt;&gt;" /> 
</div> 
<div> 
    <select id="rightValues" name=rightValues[] size="4" multiple> 
     <option value="x">9</option> 
     <option value="y">8</option> 
     <option value="z">7</option> 
    </select> 
    <div> 
     <input type="text" id="txtRight" /> 
    </div> 
</div> 
</section> 
<button type="submit" class="blue">Save</button> 

Это скрипт я использую

<script> 
$("#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()); 
}); 
</script> 

это CSS

<style> 
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; 
} 
</style> 

Ведь обменивать делается и кнопка Сохранить это с licked.I хочу, чтобы все новые значения поменялись налево, а новые значения поменялись на правую сторону.

Answer 1

попробовать это .. http://jsfiddle.net/qfefW/2/

в jsFiddle, я сделал HTML изменения, чтобы включить имя класса и изменить свой метод по умолчанию, чтобы изменить имя класса, как вы выберите слева направо.

var left; 
var right; 
var newLeft; 
var newRight;  
var addedLeftValues = new array(); 
var addedRightValues = new array(); 

    $(document).ready(function() { 
     SaveOldValues(); 
    }); 

    function SaveOldValues() 
    { 
     left = new Array(); 
     right = new Array(); 
     $('#leftValues .left').each(function(){ 
      left.push($(this).val()); 
     }); 
     $('#rightValues .right').each(function(){ 
      right.push($(this).val()); 
     }); 
    } 

    function UpdatedValues() 
    { 
     newLeft = new Array(); 
     newRight = new Array(); 
     $('#leftValues .left').each(function(){ 
      newLeft.push($(this).val()); 
     }); 
     $('#rightValues .right').each(function(){ 
      newRight.push($(this).val()); 
     });; 
    } 

    $('.blue').on("click",function(){ 
    UpdatedValues(); 
    $(newLeft).each(function(k,value){ 
     if($.inArray(value, left) == -1) 
     { 
      alert("new value in left is: " + value); 
      addedLeftValues.push(value); 
     } 
    }); 
    $(newRight).each(function(k,value){ 
     if($.inArray(value, right) == -1) 
     { 
      alert("new value in Right is: " + value); 
      addedRightValues.push(value); 
     } 
    }); 
}); 

function SendValuesToPage() 
{ 
    var leftData = JSON.Stringify(addedLeftValues); 
    var rightData = JSON.Stringify(addedRightValues); 

    // your ajax code 
}