2014-05-21 4 views
1

기본적으로 Jquery를 사용하여 한 목록 상자에서 다른 목록 상자로 항목을 이동하려고합니다. MVC 응용 프로그램에서이 작업을 수행하려고합니다.jquery를 사용하여 한 목록 상자에서 다른 목록 상자로 항목 이동하기

아래에 설명 된 코드는 작동하지만 원하는 것은 아닙니다. 따라서 소스 목록 상자에서 항목을 선택하면 대상 목록 상자에 항목이 추가됩니다. 기본적으로 버튼을 클릭하면 동작이 발생합니다. 그것은 아래에 작성한 $ ('# ShiftRight'). click (function()입니다. 아래에는 두 개의 목록 상자와 버튼 코드가 ​​있습니다. 내가 직면 한 문제는 버튼을 클릭하면 항목이 이동합니다. 당신은을 사용하고 있기 때문에 이런 일이 왜 초 동안 목적지에 다시 돌아 소스를가는 것은. 누군가가 말해 주시겠습니까?

//$('#sourceItems').change(function() { 
// $('#sourceItems option:selected').appendTo('#destinationItems'); 
//}); 

$('#ShiftRight').click(function() { 
    $('#sourceItems option:selected').appendTo('#destinationItems'); 
}); 
<div class="Row"> 
    <div class="borderlessCell" style="vertical-align:top"> 
     <p>@Html.Label("List of Recipients")</p> 
    </div> 
    <div class="borderlessCell" style="vertical-align:top"> 
     @Html.ListBox("sourceItems", (IEnumerable<SelectListItem>)ViewBag.UserList, new { @style = "width: 250px;height: 130px;" }) 
    </div> 
    <div class="borderlessCell" style="vertical-align:middle"> 
     <p><input type="submit" id="ShiftRight" value=">>" /> </p> 
     <p> <input type="submit" id="ShiftLeft" value="<<" /></p> 
    </div> 

    <div class="borderlessCell"> 
     @Html.ListBox("destinationItems", new SelectList(new[] { "" }), new { @style = "width: 250px;height: 130px;" }) 
    </div> 

답변

1

원래 목록에 다시 나타납니다 이유 것은 제출 버튼을 클릭하면 양식의 다시 게시가 발생합니다. input type="submit"을 일반 버튼으로 변경하십시오.

<p><button id="ShiftRight">&gt;&gt;</button></p> 
<p><button id="ShiftLeft">&lt;&lt;</button></p> 
관련 문제