JQuery将选择框选定的值从一个选择框复制到另一个

Posted 2023-03-05

【中文标题】JQuery将选择框选定的值从一个选择框复制到另一个

【英文标题】：JQuery copying select box selected value from one select box to another

【发布时间】：2013-02-21 21:43:38

【问题描述】：

我有 3 个选择框，我想将所选值复制到第二个选择框，然后从第二个框复制到第三个选择框。选择框将在 3 个选择框中具有相同的选项。

我该怎么办？

JSFiddle http://jsfiddle.net/andrewvmail/27rFQ/3/

 A:<select id="inputsa">
    <option id="inputa"  name="input[1][]">A</option>
    <option id="inputb" name="input"> B</option>
    <option id="inputc"  name="input[2][]"> C</option>
</select> 
B:<select id="inputsb">
    <option id="inputa"  name="input[1][]">A</option>
    <option id="inputb" name="input"> B</option>
    <option id="inputc"  name="input[2][]"> C</option>
</select> 
C:<select id="inputsc">
    <option id="inputa"  name="input[1][]">A</option>
    <option id="inputb" name="input">B</option>
    <option id="inputc"  name="input[2][]">C</option>
</select> 

<br>    




    <input id="copyAtoB" type="button" value="Copy A to B" onclick="functionCopyAtoB();">
        <br>
    <input id="copyBtoC" type="button" value="Copy B to C" onclick="functionCopyBtoC();">

干杯

【问题讨论】：

你的意思是如果在选择框A中选择B，应该粘贴到选择框B中，它有四个选项？

【参考方案1】：

function functionCopyAtoB() 
    $('#inputsb').val($('#inputsa').val());

function functionCopyBtoC() 
    $('#inputsc').val($('#inputsb').val());

jsFiddle example

【参考方案2】：

使用这个...

$(':button').on('click', function()
    if($(this).attr('id') == 'copyAtoB')
        $('#inputsb').val($('#inputsa').val());
        $('#inputsb').attr('selected', true);
    else if($(this).attr('id') == 'copyBtoC')
        $('#inputsc').val($('#inputsb').val());
        $('#inputsc').attr('selected', true);
    
);

看看这个jsFiddle Example

【参考方案3】：

请注意，所有以下示例均基于更正后的 html（<option> 标记以 </option> 结尾，不是 ，如您所想，</input> 标签 no 元素以 </input> 标签关闭）：

A:
<select id="inputsa">
    <option id="inputa" name="input[1][]">A</option>
    <option id="inputb" name="input">B</option>
    <option id="inputc" name="input[2][]">C</option>
</select>B:
<select id="inputsb">
    <option id="inputa" name="input[1][]">A</option>
    <option id="inputb" name="input">B</option>
    <option id="inputc" name="input[2][]">C</option>
</select>C:
<select id="inputsc">
    <option id="inputa" name="input[1][]">A</option>
    <option id="inputb" name="input">B</option>
    <option id="inputc" name="input[2][]">C</option>
</select>
<br>
<input id="copyAtoB" type="button" value="Copy A to B" data-from="a" data-to="b">
<br>
<input id="copyBtoC" type="button" value="Copy B to C" data-from="b" data-to="c">

一种方法：

function copyValue(from,to)
    /* these lines check if the supplied variables are Objects, with a
       typeof check, if they *are* they're assumed to be jQuery objects
       and that object is retained in the variable; otherwise it's assumed
       to be the String of an id, and a jQuery object is created, and
       assigned to the variable. */
    from = typeof from == "object" ? from : $('#' + from);
    to = typeof to == "object" ? to : $('#' + to);

    // gets the selected option, and copies that to the other node/object
    to[0].selectedIndex = from[0].selectedIndex;


$('#copyAtoB').click(function(e)
    e.preventDefault();
    copyValue($('#inputsa'),$('#inputsb'));
);

$('#copyBtoC').click(function(e)
    e.preventDefault();
    copyValue($('#inputsb'),$('#inputsc'));
);

JS Fiddle demo.

一个整理的、更通用的 jQuery 选项：

function copyValue(from, to) 
    // same as above
    from = typeof from == "object" ? from : $('#' + from);
    to = typeof to == "object" ? to : $('#' + to);
    to[0].selectedIndex = from[0].selectedIndex;


$('input:button').click(function (e) 
    e.preventDefault();
    // retrieves the data from the current jQuery object
    var data = $(this).data(),
        // gets the 'from' data (where you're copying from)
        f = 'inputs' + data.from,
        // gets the 'to' data (where you're copying to)
        t = 'inputs' + data.to;
    /* calls the function, demonstrating passing both a jQuery object,
       and a String equal to the relevant id */
    copyValue($('#' + f), t);
);

JS Fiddle demo.

因为我非常喜欢纯 javascript：

function copyValue(from,to, prefix)
    // sets a default prefix to be used
    prefix = prefix || 'inputs';
    /* checks if the variables are element nodes, if they are that node
       is used. Otherwise we assume an id is passed, and use that to find
       the relevant element node */
    from = from.nodeType == 1 ? from : document.getElementById(prefix + from);
    to = to.nodeType == 1 ? to : document.getElementById(prefix + to);
    to.selectedIndex = from.selectedIndex;


// gets all input elements
var inputs = document.getElementsByTagName('input');

// iterates through those input elements, and...
for (var i = 0, len = inputs.length; i<len; i++)
    // if they have a type equal to 'button'...
    if (inputs[i].type == 'button') 
        // binds a click-handler
        inputs[i].onclick = function(e)

            // gets the values from 'data-from' and 'data-to' attributes
            var f = this.getAttribute('data-from'),
                t = this.getAttribute('data-to');
            // assigns the function to be called, with the arguments
            copyValue(f,t, 'inputs');
        ;
    

JS Fiddle demo.

参考资料：

jQuery，来自jQuery API： :button selector。 click()。 data()。 event.preventDefault()。 click()。 纯 JavaScript，来自 Mozilla Developer Network's JavaScript resource： Element.getAttribute()。 Node.nodeType。 Conditional/ternary operator: condition ? true : false。 typeof。

【参考方案4】：

$("#copyAtoB").click(function() 

   var o = new Option($('#inputsa :selected').text(), "value");

   $(o).html($('#inputsa :selected').text());
   $("#inputsb").append(o);
 );   


 $("#copyBtoC").click(function() 

   var o = new Option($('#inputsb :selected').text(), "value");
  $(o).html($('#inputsb :selected').text());
  $("#inputsc").append(o);
 );  

见小提琴here