Question

<select id="one">
    <option id="one_val_a" value="one">one</option>
    <option id="two_val_a" value="two">two</option>
    <option id="three_val_a" value="three">three</option>
</select>

<span id="pin"></span>

我如何克隆#one，使其标识为#two，并将其选项ID设为#one_val_b，#two_val_b等。

$('#one').clone(true, true).attr('id', 'two').appendTo('#pin');

这至少会改变克隆的ID，但现在如何更改其选项ID？

Jsfiddle：http://jsfiddle.net/C2zCZ/2/

Answer 1

这是另一种方法，使用正则表达式替换option id属性，因此原始select有多少选项无关紧要：

$('#one').clone(true, true)
    .attr('id', 'two').appendTo('#pin')
    .find("option").each(function() {
        $(this).attr("id", $(this).attr("id").replace(/\_a$/, "_b"));
    });

Example fiddle

Answer 2

$('#one')
    .clone(true, true)   // perform the clone
    .attr('id', 'two')  // change the id
    .appendTo('#pin')    // append to #pin
    .children()          // get all options
    .attr("id", function(i, value) {  // processing on ids
        // replacing last charecter with its next charecter
        return value.replace(/[a-z]$/, function(char, index) {
            return String.fromCharCode(char.charCodeAt(0) + 1);
        });
    });

<强> Working Sample

Answer 3

counter = 1;
$('#one').clone(true, true).attr('id', 'two').appendTo('#pin').find('option').each(function(){
    $(this).attr('id', 'option_id_' + counter++);
});

以下是您的jsFiddle已更新并正常工作：http://jsfiddle.net/C2zCZ/4/

Answer 4

另一个单行：

$('#one').clone(true, true).attr('id', 'two').each(function() {
    $(this).children().attr("id", function(i, value) {
        switch (i) {
            case 0: return "one_val_b";
            case 1: return "two_val_b";
            case 2: return "three_val_b";
        }
    });
}).appendTo('#pin');

DEMO： http://jsfiddle.net/C2zCZ/5/

另一种更灵活的单线：

$('#one').clone(true, true).attr('id', 'two').appendTo('#pin')
    .children().attr("id", function(i, value) {

    var last = value.lastIndexOf("_") + 1;
    var char = value.substring(last).charCodeAt(0);
    return value.substring(0, last) + String.fromCharCode(char + 1);
});

DEMO： http://jsfiddle.net/C2zCZ/10/

Answer 5

这是一个班轮，

$('#one').clone(true).attr('id', 'two').children('option').attr('id',function(){
    return this.id.replace(/\a$/, 'b');
}).end().appendTo('#pin');

Fiddle

<强> P.S。

clone()中的第二个参数是复制第一个参数中的值（默认情况下），因此不需要传递第二个参数。
我使用了end()，因为我认为在插入dom后我们不应该访问它。（我的方法应该更快，但我没有做过测试）

Jquery克隆选择器并修改选项ID

5 个答案: