使用 jQuery 克隆后如何获取选定的值？答案

【问题标题】：How to get selected value after clone with jQuery?使用 jQuery 克隆后如何获取选定的值？
【发布时间】：2009-08-31 12:09:27
【问题描述】：

这是我的完整测试代码，未能获得价值：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>Job Search</title>
    <script language="javascript" type="text/javascript" src="script/jquery-1.3.2.js"></script>
    <script language="javascript">
        $(document).ready(function(){
            $('#test').click(function(){
                $('#container').clone().attr('id', 'container2').find('select').each(function() {
                    var $elem = $(this);
                    var value = $elem.val();
                    alert(value);
                });
            });
        });
    </script>
</head>

<body>
<div id="container">
    <select>
        <option value="">--</option>
        <option value="Service">Service</option>
        <option value="Sales">Sales</option>
        <option value="Marketing">Marketing</option>
        <option value="Finance">Finance</option>
        <option value="Engineering">Engineering</option>
        <option value="Management">Management</option>
    </select>
</div>
<input type="button" id="test" />
</body>

</html>

【问题讨论】：

是否要将克隆的元素插入 DOM？

标签： jquery html-select selectedvalue

【解决方案1】：

$('#container').clone().attr('id', 'container2').find('select > option').each(function() {
                var $elem = $(this);
                var value = $elem.val();
                alert(value);
            });

将 find 方法中的选择器更改为 select > option from select。

如果你不打算将元素附加到 DOM，为什么还要克隆它。

要获取克隆元素的选定值，您可以使用

$('#container').clone().attr('id', 'container2').find('select > option:selected').val()

如果您需要将克隆的元素插入到 DOM 中，您可以使用

$('#container').clone().attr('id', 'container2').appendTo("body")

以及在将克隆元素插入 DOM 后获取所选选项值的完整代码

$('#container').clone().attr('id', 'container2').appendTo("body").find('select > option:selected').val()

按钮点击的完整代码

 $(document).ready(function(){
            $('#test').click(function(){
                $('#container').clone().attr('id', 'container2').appendTo("body").find('select > option:selected').each(function() {
                    alert ( $(this).val());
                });
            });
        });

【讨论】：

$('#selectList option:selected').val()?还是没有区别？
我更新了帖子，我怀疑它与克隆（）有关
它迭代了所有选项值，但我想直接获取
如果需要将克隆的元素插入到 DOM 中，可以使用 appendTo 方法。
你知道为什么clone()后不能直接获取

【解决方案2】：

我试过了，效果很好。

$container.find('select').each(function() {
    alert($(this).attr('value'));
});

【讨论】：

我已经把我所有的测试代码都放上来了。点击按钮可以看到它不起作用。

【解决方案3】：

$('select > option:selected').val();

遍历页面上的所有选择元素并提醒所选选项的值：

$('select > option:selected').each(function() {
    alert($(this).val());
});

【讨论】：

【解决方案4】：

你是对的。 clone 丢失所选值。

我所做的是，在使用克隆时，我使用相同的 id 查找实际元素并获取它的值。

即从实际元素而不是克隆中获取值

如下所示，

var selectedOption = $('#' + cloneOfSelect.attr('id')).find('option:selected');

var selectedValue = selectedOption.val(); //or .text() for display value

【讨论】：

【解决方案5】：

function studentInfo() {
var studentInfoUrl = ".../studentInfourl"; 
var multiTags=$('.copy');
var name= multiTags.find("select.form-control#name").map(function() {
    return $(this).val();
}).get().join(',');
var dob= multiTags.find("input.form-control#dob").map(function() {
    return $(this).val();
}).get().join(',');
var gender= multiTags.find("#gender:checked").map(function() {
    return $(this).val();
}).get().join(',');
var collage= multiTags.find(".input.form-control#collage").map(function() {
    return $(this).val();
}).get().join(',');
var cloneName= '';
var cloneDob= '';
var cloneGender= '';
var cloneCollage= '';
var arr=[];
if($('.copy').length<=2){
      cloneName= name.split(',');
        cloneDob= dob.split(',');
        cloneGender= gender.split(',');
         cloneCollage= collage.split(',');
}
    for(var i=0;i<$('.copy').length ;i++){
        var studentInfo = {
                studentId  :   $("#studentId").val(),
                name       :   cloneName[i],
                dob        :   cloneDob[i],
                gender     :   cloneGender[i],
                collage    :   cloneCollage[i],
        };
        arr.push(studentInfo);
    }
    var astudentJsonRequest = JSON.stringify(arr);
    alert(arr);
    $.ajax({
        contentType : "application/json",
        dataType : 'json',
        data : astudentJsonRequest ,
        cache : false,
        type : "POST",
        url : studentInfoUrl ,
        success : function(data){}

}); }

在这里，我可以从克隆表中获取单个输入类型值，然后使用拆分方法拆分这些值，然后找到克隆表的长度并将这些值分配给相应的 bean 值。

【讨论】：