如何从多选框MVC中获取值

Question

I want to get the values in both the left and right mutli selct box after the shifting is done .This is the html code

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

This is the script i am using

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

This is the 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>

After all swapping is done and Save button is clicked.I want the all new values swapped to left and new values swapped to right side.

Answer 1

try this.. http://jsfiddle.net/qfefW/2/

in jsFiddle, I have made html modification to include class name and modified your default method to change the class name as you select from left to right.

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
}