Making existing item selected in listbox using Ajax in mvc4

Here I am displaying already selected items into listbox which are present into the database. And also I am removing them from orginal item listbox.

Design

In above design there are two listboxes one is showing all items and other is selected item. There are two button which transfer item from left to right and right to left.

Here right hand side listbox showing already selected items. Generally while editing the from data we retrieve already selected values into the form control in such case we are using this feature.

Ajax Action

 public JsonResult Edit(string graphicsId)
        {
 List<string> mappedChannelId = context.ChannelGraphicsMaps.Where
(x => x.GraphicsId == Id).Select(y => y.channel_code).ToList();
            string mappedChannelName = string.Empty;

List<KeyValuePair<string, string>> selectedChannels =
 new List<KeyValuePair<string, string>>();

            foreach (string item in mappedChannelId)
            {
      mappedChannelName=context.channel_master
.Where(a => a.channel_code == item)
.Select(a =>a.channel_name).SingleOrDefault().ToString();
 
selectedChannels.Add(new KeyValuePair<string,
string>(item,mappedChannelName));
            }           

  var result = (from x in graphics select new 
{ 
    SelectedChannels=selectedChannels,                     
});
   return Json(result, JsonRequestBehavior.AllowGet);
        }

Ajax code

  var options = {};
                options.url = '@Url.Action("Edit", "GraphicsMaster")',
                options.type = "POST";
                options.data = JSON.stringify({ graphicsId: Id });
                options.dataType = "json";
                options.contentType = "application/json";
                options.success = function (graphicsEdit) {
            //Code for assigning values to control of Programme
      for (var i = 0; i < graphicsEdit.length; i++)
 {
 /*Getting already selected channels into listbox
       and remove it from all channels list*/
  $('#selectedChannelList').empty();
 for (var j = 0; j < graphicsEdit[i].SelectedChannels.length; j++)
 {
 var listBox = document.getElementById("selectedChannelList");
 $("#selectLeft option[value=" + graphicsEdit[i].SelectedChannels[j].Key + "]").remove();

 move(listBox, graphicsEdit[i].SelectedChannels[j].Key, graphicsEdit[i].SelectedChannels[j].Value);
                        }

}

Design for above code in mvc4

<table>
<tr>
  <td>
     Select Channel
  </td>
  <td valign="top">
     @Html.ListBox("channels", ViewBag.channels as MultiSelectList,
       new { size = "6", id = "selectLeft" })
  </td>
  <td valign="top">
 <input name="btnRight" type="button" id="btnRight" value=">>" onclick="javaScript:moveToRightOrLeft(1);">
    <input name="btnLeft" type="button" id="btnLeft" value="<<" onclick="javaScript:moveToRightOrLeft(2);">
 </td>
<td valign="top">
     @Html.ListBox("channelSelected", new List<SelectListItem>(), 
      new { size = "6", id = "selectedChannelList" })
</td>
</tr>
</table>