Question

$('#addAllButton').click(function () {
            var options = '';
            $('#fromList').find('option').each(function () {
                alert($(this).val());
                //options += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
            });
            $('#toList').append(options);
        });

<select id="fromList" name="drop1" class="listBox" multiple="multiple">
                    <option value="1">item 1</option>
                    <option value="2">item 2</option>
                    <option value="3">item 3</option>
                    <option value="4">item 4</option>
                    <option value="0">All</option>
</select>

<select id="toList" name="drop1" class="listBox" multiple="multiple">
                        <option value="1">item 1</option>
                        <option value="2">item 2</option>
                        <option value="3">item 3</option>
                        <option value="4">item 4</option>
                        <option value="0">All</option>
    </select>

我有一个按钮全部添加。我希望此按钮将每个选项从fromList选择列表添加到toList。我的功能似乎不起作用，有人能指出我正确的方向吗？

我尝试使用部分代码SpYk3HH：

$('#addAllButton').click(function () {
                //options += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
                $('#fromList').children().appendTo($("#toList"));
            });

我无法让它发挥作用。我有一个名为Add All的按钮，所以当他们点击它时，它会将所有内容从#fromList移动到#toList。以上似乎也没有起作用。

Answer 1

将所有选项从第一个列表移动到第二个列表：

$('#addAllButton').click(function() {
    var options = $('#fromList').find('option');
    $('#toList').append(options);
});

JS Fiddle demo

如果从其他地方的评论/答案看来，您希望移动 <{1}}元素，那么：

option

JS Fiddle demo

参考文献：

append()。

find()。

slice()。

Answer 2

<强>已更新

对不起，我花了很长时间才弄清楚，昨晚一堆疯狂。无论如何，这个节目。

您可以在this fiddle

找到相关工作示例（点击按钮）

我不确定你想要什么，但我设置的是你的代码添加了一个按钮和一个跨度让用户知道从第一个列表中选择的东西。我将通过评论细分下面的例子。

// this first line is more jQuery updated alternate to $(document).ready(function() {})
$(function(){
    //  next we add a click event to the button
    $("#btnClick").button().click(function(e) {
        $("#NothingSelected").hide(); // simply ensure our warning text is closed
        var $val = $("#fromList").val();  // since this is a multival select list i want to itterate through all selected values
        //  but first 2 checks
        //  Check 1) is it null, aka, nothing is select
        if ($val == null) {
            $("#NothingSelected").show(); // displays our span of no selected text help
            setTimeout(function() { $("#NothingSelected").fadeOut("slow"); }, 3000); // sets a timer to had the no selected span after 3 seconds
        }
        else if ($.inArray("0", $val) >= 0) {   //  check 2) is "all" option selected
            // The following line would prolly be quickest and easiest way
            // $("#fromList option:not(:last-child)").appendTo($("#toList"));
            // However, this will not check for duplicates and will leave you with duplicate options with the same value
            // So below i itterate through each option in from list and compare it to options in to list
            $("#fromList option").each(function(i) {  //  itterate through each option in from list
                var $this = $(this); // this will use actual option and thus, on append will move the option
                //  change to $this = $(this).clone() if you only want to clone the option
                if ($this.val() != 0) { // check to make sure the option we are looking at is not the "all" option
                    if ($("#toList:has(option[value="+$this.val()+"])").length > 0) {  //check to see if option already exist in too list
                        // here i'll create an "additive" to the value (you can do what you like) of duplicate entries
                        $this.val($this.val() + "-2")
                        // also change text to reflect it
                        .text($this.text() + " -2")
                    };
                    $("#toList").append($this); // here we move the option or send in the clone if cloned
                }
            });
        }
        else {  //do other sutff (it's not "all" selected)
            // I dont know what else you want, so here i'm just simply going to add the current from item to to list
            for (x in $val) {
                var fromItem = $("#fromList option[value="+$val[x]+"]");
                if ($("#toList:has(option[value="+$val[x]+"])").length > 0) { 
                    fromItem.val(fromItem .val() + "-2").text(fromItem.text() + " -2")
                };
                $("#toList").append(fromItem);
            };
        };
        //  With all that done, lets finally ensure that the 0 val (aka "all") is back at bottom of to list
        $("#toList option[value=0]").appendTo($("#toList"));
    });
});

Answer 3

嘿老兄试着用它也许有帮助。

$('#toList').append($('#fromList').html());

它会将selectList选项附加到toList

Gudluck Bro !!

传递选择选项的Jquery函数

3 个答案: