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

Question

我有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();"> 

干杯

Answer 1

function functionCopyAtoB() { 
    $('#inputsb').val($('#inputsa').val()); 
} 
function functionCopyBtoC() { 
    $('#inputsc').val($('#inputsb').val()); 
} 

jsFiddle example

Answer 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

Answer 3

请注意：所有下面的例子是基于修正HTML（一个<option>标签是封闭的</option>和不，你似乎认为，一个</input>标签， 没有元件与一个</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选项：

​​

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。

Answer 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