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.
It seems to be working: http://jsfiddle.net/qWasX/1/
Are you sure you are having problems with your script?