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>
source to share
$('#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());
});
});
});
source to share
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
source to share
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.
source to share