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

发布于 2024-08-03 08:40:48 字数 1584 浏览 8 评论 0原文

这是我的完整测试代码，但未能获取该值：

<!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>

原文

Here is my complete testing code,which failed to get the value:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

唱一曲作罢 2024-08-10 08:40:48

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

将 find 方法中的选择器更改为选择 >选择中的选项。

另外，如果您不打算将元素附加到 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());
                });
            });
        });

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

Changed the selector in find method to select > option from select.

Also why are you cloning the element if you are not going to append it to the DOM.

To get the selected value of the cloned element you can use

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

If you need to insert the cloned element to the DOM you can use

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

and full code for getting the selected option value after inserting the cloned element to the DOM

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

Complete code for the button click

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

回复收藏 0 原文

菩提树下叶撕阳。 2024-08-10 08:40:48

我已经尝试过了，这有效。

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

I've tried it, and this works.

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

回复收藏 0 原文

暖风昔人 2024-08-10 08:40:48

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

要迭代页面上的所有选择元素并提醒所选选项的值：

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

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

To iterate over all select elements on the page and alert the selected options' values:

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

回复收藏 0 原文

冷清清 2024-08-10 08:40:48

你是对的。 克隆会丢失所选值。

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

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

如下所示，

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

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

You are right. The clone loses the selected value.

What I did was, while working with the clone I look-up the actual element with same id and get its value.

i.e. Get the value from the actual element instead of the clone

Like below,

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

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

回复收藏 0 原文

且行且努力 2024-08-10 08:40:48

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){}

});
在

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

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){}

});
}

Here i can get the individual input type values form clone table and then using the split method to split these values and after i find the length of clone table and assign these values to corresponding bean values.

回复收藏 0 原文

~没有更多了~