如何使用jquery将所选项目从一个下拉组列表(optgroup）移动到另一个下拉列表(optgroup）

How to move selected items from one dropdown group list (optgroup)to another dropdown group list (optgroup) using jquery?

本文关键字：optgroup 下拉列表 另一个 移动 一个 列表 jquery 何使用 选项 项目      更新时间：2023-09-26

我有两个下拉分组列表（Optgroup）。我想使用向右移动和向左移动按钮在这两个html控件之间交换项目。我可以从左侧下拉列表中选择一个或多个项目，然后单击向右移动按钮。在这种情况下，我可以将所选项目移动到右侧下拉分组列表。但项目并不像左侧下拉列表那样作为分组列表插入。

这是我的html控件。

<select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10">
<option value="">Please select</option>
<optgroup label="Group A">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="Group B">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</optgroup>
</select>
<button type="button" title="Forward" id="btnRight">Move Right</button>
<button type="button" title="Backward" id="btnLeft">Move Left</button>
<select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10">
</select>

我编写了以下代码，将项目从左下拉分组列表移动到右下拉分组列表。

<script type="text/javascript">
    $(document).ready(function () {
defaultListBind = function (e) {
            var selectedOpts = $('#FieldstoBeMatchedOn');
            alert(selectedOpts);
            $('#FieldstoBeMatchedOn').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            //e.preventDefault();
        }
        // defaultListBind();
        $('#btnRight').click(function (e) {
            var selectedOpts = $('#AvailableFields option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }
            $('#FieldstoBeMatchedOn').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            defaultSelect();
            e.preventDefault();
        });
        $('#btnLeft').click(function (e) {
            var selectedOpts = $('#FieldstoBeMatchedOn option:selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            }
            $('#AvailableFields').append($(selectedOpts).clone());
            $(selectedOpts).remove();
            defaultSelect();
            e.preventDefault();
        });
defaultSelect = function () {
            $("#FieldstoBeMatchedOn option").each(function () {
                $(this).prop("selected", true);
            });
        }
    });
</script>

如何以分组或类别格式将项目从左下拉列表移动到右下拉列表？

JSfiddle

我真的很感谢你的提前帮助。

这个怎么样。当右侧中没有任何内容时，您必须找到删除组的方法

 $(document).ready(function () {    
$('#btnRight').click(function (e) {
                var selectedOpts = $('#AvailableFields option:selected');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
    if(selectedOpts.parent().attr('label') == "Group A"){
        $('#FieldstoBeMatchedOn').append($('<optgroup label="Group A">')).append($(selectedOpts).clone());
                $(selectedOpts).remove();
                defaultSelect();
                e.preventDefault();
    }
    else{
        $('#FieldstoBeMatchedOn').append($('<optgroup label="Group B">')).append($(selectedOpts).clone());
                $(selectedOpts).remove();
                defaultSelect();
                e.preventDefault();
    }
            });
            $('#btnLeft').click(function (e) {
                var selectedOpts = $('#FieldstoBeMatchedOn option:selected');
                if (selectedOpts.length == 0) {
                    alert("Nothing to move.");
                    e.preventDefault();
                }
                $('#AvailableFields').append($(selectedOpts).clone());
                $(selectedOpts).remove();
                defaultSelect();
                e.preventDefault();
            });
    defaultSelect = function () {
                $("#FieldstoBeMatchedOn option").each(function () {
                    $(this).prop("selected", true);
                });
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10">
    <option value="">Please select</option>
    <optgroup label="Group A">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </optgroup>
    <optgroup label="Group B">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </optgroup>
    </select>
    <button type="button" title="Forward" id="btnRight">Move Right</button>
    <button type="button" title="Backward" id="btnLeft">Move Left</button>
    <select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10">
    </select>

相关文章：