6

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.

prajan
  • 189
  • 2
  • 13

2 Answers2

3

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.

Community
  • 1
  • 1
WSkid
  • 2,736
  • 2
  • 22
  • 26
  • Your right but just as a note .attr() has also been made completely backward compatible so whilst you should write new scripts using .prop(), .attr() should work exactly the same. – Henry May 18 '11 at 09:12
  • It does appear to work fine now with `.attr()` in 1.6.1, but in the off chance they are forced to use 1.6.0 (for whatever reason), and just in general to familiarize themselves with the difference in case jQuery ever does break backwards compatability. – WSkid May 18 '11 at 09:20
  • @WSKid : Inspect the visible dropdown element (Hindu / Muslim / Christian) with FIREBUG. The name attribute has empty value. – prajan May 18 '11 at 09:33
  • You are applying the name to the Caste drop down. Not the Religion drop down -- did you want it to apply to both, or just the top or bottom? – WSkid May 18 '11 at 09:39
  • The name='Caste' should be applied to the Caste dropdown which is visible. The hidden Caste dropdown name should be empty. So, only the visible Caste dropdown should have name='Caste'. – prajan May 18 '11 at 09:55
  • That is what is happening for me currently in Chrome 13, Firefox 3.6.16 and IE 9. – WSkid May 18 '11 at 10:06
  • Pls see the screenshot here: [link](http://i51.tinypic.com/2q2pixe.gif) . I am using Firefox 3.6.17. – prajan May 18 '11 at 10:25
  • This appears to be a bug of Firebug and FireFox 3.6.17. Do this: 1. Select Christian, and inspect element - it gets Caste. 2. Select Muslim, in firebug it does NOT get Caste. 3. Now powerdown Firebug, and re-inspect element (which reopens Firebug) --- viola! Muslim is showing name="Caste". – WSkid May 18 '11 at 10:54
  • @WSkid : The problem was with the Firebug HTML console.. it does not update the code of the dynamic content. For every change in the dropdown, i closed and again opened the firebug.. and now it shows the updated content (i.e.,) name='Caste' is set for currently visible select box. – prajan May 18 '11 at 10:56
  • Thanks a lot WSkid.. for your timely help. – prajan May 18 '11 at 10:57
  • This is the solution man... I was searching for it for more than an hour.. thank you...:) – Dilip Rajkumar Jun 10 '14 at 06:29
1

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

Are you sure you are having problems with your script?

Henry
  • 2,187
  • 1
  • 15
  • 28
  • @Henry Garle : its not working even in the link you have provided. Inspect the visible dropdown element with firebug. The name attribute is empty for the visible dropdown. – prajan May 18 '11 at 09:29
  • Pls see the screenshot here: [link](http://i51.tinypic.com/2q2pixe.gif) . I am using Firefox 3.6.17. – prajan May 18 '11 at 10:27
  • Thats my point, its working perfectly for me. Let me get a screenshot. – Henry May 18 '11 at 10:32
  • Sigh..!! The problem is with the Firebug !!! Its HTML console does not update the dynamic content immediately. For every change in the dropdown, i closed and again opened the firebug.. and now it shows the updated content (i.e.,) name='Caste' is set for currently visible select box. – prajan May 18 '11 at 10:53
  • Thanks a lot Henry.. for your timely help. – prajan May 18 '11 at 10:55