JQuery将选择框选定值从一个选择框复制到另一个选择框
我有3个选择框,我想将所选值复制到第二个选择框,并从第二个选择框复制到第三个选择框。选择框将具有与3选择框相同的选项 我该怎么办 JSFIDLE 干杯 用这个JQuery将选择框选定值从一个选择框复制到另一个选择框,jquery,select,jquery-selectors,Jquery,Select,Jquery Selectors,我有3个选择框,我想将所选值复制到第二个选择框,并从第二个选择框复制到第三个选择框。选择框将具有与3选择框相同的选项 我该怎么办 JSFIDLE 干杯 用这个 $(':button').on('click', function(){ if($(this).attr('id') == 'copyAtoB'){ $('#inputsb').val($('#inputsa').val()); $('#inputsb').attr('selected', tru
$(':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);
}
});
请注意,以下所有示例都基于正确的HTML标记,标记是用标记关闭的,而不是像您认为的那样用标记关闭的,没有元素是用标记关闭的:
一个整洁的、更通用的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);
});
仅仅因为我非常喜欢纯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');
};
}
}
参考资料:
jQuery,来自:
.
.
.
.
.
纯JavaScript,来自:
.
.
.
.
参见fiddle您的意思是,如果在选择框A中选择B,它应该粘贴到选择框B中,并且它有四个选项?
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'));
});
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);
});
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');
};
}
}
$("#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);
});