How do I get the selected value after cloning using jQuery?

Here is my test code complete that couldn't 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>

      

+2


source to share


5 answers


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

      

Changed selector in search method to select> option from selection.

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

To get the selected value of the cloned item, you can use

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

      

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



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

      

and the complete code to get the selected parameter value after inserting the cloned element into the DOM

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

      

Enter the code for the button

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

      

+2


source


I tried it and it works.



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

      

+1


source


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

      

To iterate over all the selections on the page and alert the values ​​of the selected options:

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

      

0


source


You're right. clone

loses the selected value.

What I did, while working with a clone, I loop through the actual element with the same id

and get its value.

i.e. Get value from actual item instead of cloning

As below,

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

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

      

0


source


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 ​​that form the clone table and then use the split method to split those values ​​and after I find the length of the clone table and assign those values ​​to the corresponding bean values.

0


source







All Articles