CODEWITHSUNDEEP
jqueryhtml-selectselectedvalue
omg
omg

Reputation: 139862

How to get selected value after clone with jQuery?

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>

Upvotes: 2

Views: 9364

Answers (5)

HariKrishna
HariKrishna

Reputation: 101

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.

Upvotes: 0

Robin Maben
Robin Maben

Reputation: 23044

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

Upvotes: 0

rahul
rahul

Reputation: 187030

$('#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());
                });
            });
        });

Upvotes: 2

karim79
karim79

Reputation: 342635

$('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());
});

Upvotes: 0

rogeriopvl
rogeriopvl

Reputation: 54056

I've tried it, and this works.

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

Upvotes: 1

Related Questions