使用JQuery将项目移动到列表,具体取决于所选的单选按钮

时间:2013-10-01 02:00:22

标签: jquery

我有一个包含物品的清单。我希望用户选择一个列表,使用单选按钮添加项目以选择列表。

我知道php和那种爵士乐,但我是一个jquery新手。我把我找到的一些代码拼凑在一起,但我不知道如何依靠单选按钮进行移动。

如果有人知道该怎么做,那就太棒了。如果有人知道我应该在哪里看到它自己也很棒。不怕学习,只是不知道从哪里开始。

2 个答案:

答案 0 :(得分:1)

我在代码中添加了一些逻辑。我禁用了多选,直到选择了一个无线电选择,然后根据选择使用一个指定三元条件的变量来分配正确的列表以附加到:

小提琴:http://jsfiddle.net/cWHR7/3/

$("#button1").click(function(){
    $("#list1 > option:selected").each(function(){
        //Get the right list to append to
        var list = $(":radio:checked").val() == 1 ? $("#lista") : $("#listb");

        //Append away!
        $(this).remove().appendTo(list);
    });
});

//Enable the list
$(":radio").change(function() {
    $("#list1").prop("disabled", false);
});

修改:您的附加列表也有重复的ID,因此我将其更改为listalistb

答案 1 :(得分:1)

@tymeJV答案是正确的,但更简单的UI选项(更少的点击次数)就是只有两个按钮:

<button class="move" value="#lista">Move to list A</button>
<button class="move" value="#listb">Move to list B</button>

点击处理程序:

$('body').on('click', '.move', function() {
    var list = $(this).val();
    $("#list1 > option:selected").each(function(){
        $(this).remove().appendTo(list);
    });
});