Menu
The jQuery attr() does not update its value on changing. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Religion = $("#Religion"),
SelectCaste = $("#SelectCaste"),
Hindu = $("#Hindu"),
Muslim = $("#Muslim"),
Christian = $("#Christian");
Religion.change(function(){
var sReligion = $(this).val();
SelectCaste.hide().attr('name', '');
Hindu.hide().attr('name', '');
Muslim.hide().attr('name', '');
Christian.hide().attr('name', '');
if(sReligion=="1") {
Hindu.show();
Hindu.attr('name','Caste');
}
else if(sReligion=="2") {
Muslim.show();
Muslim.attr('name','Caste');
}
else if(sReligion=="3") {
Christian.show();
Christian.attr('name','Caste');
}
});
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Religion</td>
<td>
<select class="FormInput" name="Religion" id="Religion">
<option selected="selected" label="Select" value="">- Select Religion -</option>
<option label="Hindu" value="1">Hindu</option>
<option label="Muslim" value="2">Muslim</option>
<option label="Christian" value="3">Christian</option>
</select>
</td>
</tr>
<tr>
<td>Caste</td>
<td>
<select class="FormInput" id="SelectCaste" disabled="disabled">
<option value="" selected="selected">- Select Caste -</option>
</select>
<div id="CasteList">
<select class="FormInput" id="Hindu" style="display:none">
<option value="" selected="selected">- Select Caste -</option>
<option value="1">Ad Dharmi</option>
<option value="2">Adi Dravida</option>
<option value="3">Aggarwal</option>
<option value="4">Agri</option>
<option value="5">Ahom</option>
<option value="6">Ambalavasi</option>
<option value="7">Arora</option>
<option value="8">Arunthathiyar</option>
<option value="9">Arya Vysya</option>
<option value="10">Others</option>
</select>
<select class="FormInput" id="Muslim" style="display:none">
<option value="" selected="selected">- Select -</option>
<option value="328">Ehle Hadith</option>
<option value="329">Gulf Muslims</option>
<option value="330">Memon</option>
<option value="331">Ansari</option>
<option value="332">Arain</option>
<option value="333">Awan</option>
<option value="334">Bengali</option>
<option value="357">Others</option>
</select>
<select class="FormInput" id="Christian" style="display:none">
<option value="" selected="selected">- Select -</option>
<option value="358">Born Again</option>
<option value="359">Bretheren</option>
<option value="360">CMS</option>
<option value="361">CNI</option>
<option value="362">CSI</option>
<option value="363">Catholic</option>
<option value="364">Roman Catholic</option>
<option value="365">Evangelical</option>
<option value="376">Others</option>
</select>
</div>
</td>
</tr>
</table>
</body>
</html>
On changing the 'Religion' selectbox, the other dropdown boxes (Hindu / Muslim / Christian) does not hold the attribute name="Caste".
Please assist me to fix the issue..
Thanks.
895
As of jQuery 1.6+ .attr() refers to HTML attributes and initial settings, and .prop() refers to the DOM property (what you want).
See the 1.6.1 update post for more detailed examples and this SO question for even more info.
Here is a jsfiddle with all attr to prop: jsfiddle.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
