CODEWITHSUNDEEP
jquery
prajan
prajan

Reputation: 189

The jQuery attr() does not update its value on changing

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.

Upvotes: 6

Views: 5285

Answers (2)

Henry
Henry

Reputation: 2187

It seems to be working: http://jsfiddle.net/qWasX/1/

Are you sure you are having problems with your script?

Upvotes: 1

WSkid
WSkid

Reputation: 2786

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.

Upvotes: 3

Related Questions