Question

jQuery attr（）在更改时不会更新其值。以下是我的代码：

<!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>

在更改'Religion'选择框时，其他下拉框（印度教/穆斯林/基督徒）不会保留属性name =“Caste”。

请协助我解决问题..

感谢。

Answer 1

从jQuery 1.6+开始.attr()引用HTML属性和初始设置，.prop()引用DOM属性（你想要的）。

有关详细示例，请参阅1.6.1 update post，有关更多信息，请参阅此SO question。

这是一个包含所有attr到prop的jsfiddle：jsfiddle。

Answer 2

似乎有效：http://jsfiddle.net/qWasX/1/

您确定自己的脚本有问题吗？

jQuery attr（）在更改时不会更新其值

2 个答案: