The attr () jQuery does not update its value when editing

advertisements

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?