如何从下拉列表中选择多个值，并使用JavaScript或jQuery将其添加到另一个字段

Question

这是我完全需要的图像。 请仔细阅读图片。

Answer 1

愿这可以帮到你 -
的jsfiddle

<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
function selectAll(Sels){
    for (x=0; x < Sels.length ; x++){
    Sels[x].selected = "1";
    }
}
</script>
<form name="Example">
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <select name="Features" size="9" MULTIPLE>
                <option value="2">Row 2</option>
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
                <option value="6">Row 6</option>
                <option value="7">Row 7</option>
                <option value="8">Row 8</option>
                <option value="9">Row 9</option>
            </select>
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)"><br>

            <input type="Button" value="Add All>>" style="width:100px" onClick="selectAll(document.Example.Features);SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
            <br>
            <input type="Button" value="<< Remove All" style="width:100px" onClick="selectAll(document.Example.FeatureCodes);SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)">
        </td>
        <td>
            <select name="FeatureCodes" size="9" MULTIPLE>
                <option value="1">Row 1</option>
                <option value="3">Row 3</option>
            </select>
        </td>
    </tr>
</table>
</form>

更新： Javascript：将项目从一个多选框移动到另一个

Answer 2

工作的jsFiddle

HTML - >

<div>
    <select id="first" multiple="true">
        <option value="something@something.com"> something@something.com </option>
        <option value="something@something.com"> something@something.com </option> 
        <option value="something@something.com"> something@something.com </option> 
        <option value="something@something.com"> something@something.com </option> 
        <option value="something@something.com"> something@something.com </option>        
    </select>
</div>
<div class="mid">
    <button class='add'> > </button>
    <button class='remove'> < </button>
    <button class='add-all'> >>> </button>
    <button class='remove-all'> <<< </button>
</div>
<div class="end">
    <select id="second" multiple="true">
    </select>
</div>
<div style="clear:both;"></div>​

jQuery - >

$('.add').click(function(){
    $('#first option:selected').appendTo('#second');
});
$('.remove').click(function(){
    $('#second option:selected').appendTo('#first');
});
$('.add-all').click(function(){
    $('#first option').appendTo('#second'); 
});
$('.remove-all').click(function(){
    $('#second option').appendTo('#first'); 
});
​

Answer 3

你可以使用这样的东西。 这是免费的，并且做你想要的。 不发明轮子。

多选

例：

<select id="example" name="example" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

而jQuery代码将是：

$(document).ready(function(){
    $("#example").multiselect();
});

Answer 4

请检查这个小提琴 。

HTML

<select id="sel1" multiple="multiple">
    <option value="something@something.com"> something@something.com </option>
    <option value="something@something.com"> something@something.com </option>
    <option value="something@something.com"> something@something.com </option>
    <option value="something@something.com"> something@something.com </option>
    <option value="something@something.com"> something@something.com </option>
</select>

<button id='add'> > </button>
<button id='remove'> < </button>
<button id='multi_add'> >>> </button>
<button id='multi_remove'> <<< </button>

<select id="sel2" multiple="multiple">
</select>

jQuery代码

$('#multi_add').click(function(){
    //$('#sel2 option').remove(); //If you want to remove previous option
    $('#sel1 option').each(function(){
        if($(this).is(':checked')){
            $('#sel2').append($(this).clone());
            $(this).remove(); //If you want to remove from current list
        }
    });
});

$('#multi_remove').click(function(){
    //$('#sel1 option').remove(); //If you want to remove previous option
    $('#sel2 option').each(function(){
        if($(this).is(':checked')){
            $('#sel1').append($(this).clone());
            $(this).remove(); //If you want to remove from current list
        }
    });
});

$('#add').click(function(){
    $('#sel1 option:selected').appendTo('#sel2');
});
$('#remove').click(function(){
    $('#sel2 option:selected').appendTo('#sel1');
});