[英]Moving items from one listbox to another using jquery
我基本上想使用Jquery將項目從一個列表框移動到另一個列表框。 我正在嘗試在我的MVC應用程序中執行此操作。
下面注釋的代碼有效,但這不是我想要的。 因此,如果我在源列表框中選擇一個項目,它將被添加到目標列表框中。 我基本上希望移動會在單擊按鈕時發生。 那就是我在下面寫的$('#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>
它似乎重新出現在原始列表中的原因是因為您使用的是“提交”按鈕,這會導致表單的回發。 將input type="submit"
更改為普通按鈕:
<p><button id="ShiftRight">>></button></p>
<p><button id="ShiftLeft"><<</button></p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.