2011-05-18 88 views
5

jQuery attr()在更改時不更新其值。這裏是我下面的代碼: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> 

在改變「宗教」選擇框,其他的下拉框(印度/穆斯林/基督徒)不成立屬性名=「種姓」。

請協助我解決問題。

謝謝。

回答

1

這似乎是工作:http://jsfiddle.net/qWasX/1/

你確定你有與你的腳本的問題?

+0

@Henry Garle:即使在你提供的鏈接中它也不工作。用螢火蟲檢查可見的下拉元素。名稱屬性對於可見的下拉列表是空的。 – prajan 2011-05-18 09:29:35

+0

請看這裏的截圖:[鏈接](http://i51.tinypic.com/2q2pixe.gif)。我正在使用Firefox 3.6.17。 – prajan 2011-05-18 10:27:30

+0

這就是我的觀點,它對我來說非常合適。讓我得到一個截圖。 – Henry 2011-05-18 10:32:22

3

從jQuery 1.6+開始.attr()引用HTML屬性和初始設置,.prop()引用DOM屬性(你想要的)。

查看1.6.1 update post瞭解更多詳細信息,而SO question可獲得更多信息。

這是一個jsfiddle,所有attrpropjsfiddle

+0

你的權利,但作爲一個注意.attr()也已完全向後兼容,所以雖然你應該使用.prop(),.attr()編寫新的腳本應該工作完全一樣。 – Henry 2011-05-18 09:12:26

+0

現在在1.6.1中使用'.attr()'似乎可以正常工作,但是他們被迫使用1.6.0(無論出於何種原因),並且只是爲了熟悉它們之間的區別案例jQuery永遠不會打破向後兼容性。 – WSkid 2011-05-18 09:20:42

+0

@WSKid:用FIREBUG檢查可見的下拉元素(印度教/穆斯林/基督徒)。名稱屬性具有空值。 – prajan 2011-05-18 09:33:00