ListBox 2 ListBox (jQuery/Json)

@{
    ViewBag.Title = "List2List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/lib/jquery.js"></script>
<script src="~/Scripts/lib/jquery-ui.custom.js"></script>


<script>
    $(function () {
        $('#btnRight').click(function (e) {
            var selectedOpts = $('#lstBox1 option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }
            $('#lstBox2').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });
        $('#btnAllRight').click(function (e) {
            var selectedOpts = $('#lstBox1 option');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }
            $('#lstBox2').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });
        $('#btnLeft').click(function (e) {
            var selectedOpts = $('#lstBox2 option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }
            $('#lstBox1').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });
        $('#btnAllLeft').click(function (e) {
            var selectedOpts = $('#lstBox2 option');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }
            $('#lstBox1').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            e.preventDefault();
        });
    });

    $(function () {
        //get a reference to the select element
        $select = $('#lstBox3');
        //request the JSON data and parse into the select element
        $.ajax({
            url: '/Handler3.ashx',
            dataType:'JSON',
            success:function(data){
                //clear the current content of the select
                $select.html('');
                //iterate over the data and append a select option
                $.each(data.person, function(key, val){
                    $select.append('<option id="' + val.id + '" value="'+ val.value +'">' + val.name + '</option>');
                })
            },
            error:function(){
                //if there is an error append a 'none available' option
                $select.html('<option id="-1">none available</option>');
            }
        });
    });
  
    $(function () {
        $('#lstBox3').change(function () {
            alert($(this).val());
        })
    });
</script>
<p/>
<table>
    <tr>
        <td>
            <div class="subject-info-box-1">
                <select multiple="multiple" id='lstBox1' style="width:200px;height:200px">
                    <option value="ajax">Ajax</option>
                    <option value="jquery">jQuery</option>
                    <option value="javascript">JavaScript</option>
                    <option value="mootool">MooTools</option>
                </select>
            </div>
        </td>
        <td style="width:200px;height:200px">
            <div class="subject-info-arrows text-center">
                <input type="button" id="btnAllRight" value=">>" /><br /><br />
                <input type="button" id="btnRight" value=">" /><br /><br />
                <input type="button" id="btnLeft" value="<" /><br /><br />
                <input type="button" id="btnAllLeft" value="<<" />
            </div>
        </td>
        <td>
            <div class="subject-info-box-2">
                <select multiple="multiple" id='lstBox2' style="width:200px;height:200px">
                    <option value="asp">ASP.NET</option>
                    <option value="c#">C#</option>
                    <option value="vb">VB.NET</option>
                    <option value="java">Java</option>
                </select>
            </div>
        </td>      
    </tr>
</table>
<p/><p /><p />
<select multiple="multiple" id='lstBox3' style="width:200px;height:200px"></select>
------------------------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCTest
{
    /// <summary>
    /// Handler3 的摘要描述
    /// </summary>
    public class Handler3 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string json = "";
            json += "{\"person\": [               ";
            json += "  {                        ";
            json += "    \"id\": \"1\",             ";
            json += "    \"name\": \"Person1\",     ";
            json += "    \"value\": \"a\"           ";
            json += "  },                       ";
            json += "  {                        ";
            json += "    \"id\": \"2\",             ";
            json += "    \"name\": \"Person2\" ,     ";
            json += "    \"value\": \"b\"           ";
            json += "  },                       ";
            json += "  {                        ";
            json += "    \"id\": \"3\",             ";
            json += "    \"name\": \"Person3\" ,     ";
            json += "    \"value\": \"c\"           ";
            json += "  }                        ";
            json += "]}                         ";

            context.Response.ContentType = "application/json";
            context.Response.Write(json);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}