jQuery attr() not working while dynamically updating it
I am having trouble with jQuery attr(). Here is my code:
$(document).ready(function(){
var Religion = $("#Religion"),
Hindu = $("#Hindu"),
Muslim = $("#Muslim"),
Christian = $("#Christian");
Religion.change(function(){
var sReligion = $(this).val();
if(sReligion=="1") {
SelectCaste.css('display','none');
Hindu.css('display','block');
Hindu.attr('name','Caste');
Muslim.css('display','none');
Muslim.attr('name','');
Christian.css('display','none');
Christian.attr('name','');
}
else if(sReligion=="2") {
Hindu.css开发者_Python百科('display','none');
Hindu.attr('name','');
Muslim.css('display','block');
Muslim.attr('name','Caste');
Christian.css('display','none');
Christian.attr('name','');
}
else if(sReligion=="3") {
Hindu.css('display','none');
Hindu.attr('name','');
Muslim.css('display','none');
Muslim.attr('name','');
Christian.css('display','block');
Christian.attr('name','Caste');
}
});
});
If sReligion (actually a select box) value is set to '1', then the attribute is set for Hindu. i.e.,
<select name='Caste' id="Hindu"><option value=''>Select Caste</option>...</select>
But if i change the sReligion value, other than '1', then the attribute is not set and name=" ", for other conditions.
Kindly suggest me a good solution..
Thanks in advance...
Simply make 3 selects with 3 different names, and on your back end use the appropriate one depending on the Religion value.
Also, you can simply use show/hide from jquery:
if(sReligion=="1") {
Hindu.show();
Muslim.hide();
Christian.hide();
}
The code is working fine. The problem was with the Firebug HTML console !!! It does not update the code dynamically. For every change in the selebox, i have to close and again open the firebug console to see the updated code.
Thanks to Mohamed Nuur and meagar for your timely help...
If you are trying to have one drop down based on what was selected, it would be better to have one select that is the visible one, and the rest are hidden, but you only use their content.
$(document).ready(function(){
var Religion = $("#Religion"),
Hindu = $("#Hindu"),
Muslim = $("#Muslim"),
Christian = $("#Christian");
Religion.change(function(){
var sReligion = $(this).val();
if(sReligion=="1") {
// copy Hindu to select caste
} else if(sReligion=="2") {
// copy Muslim to select caste
} else if(sReligion=="3") {
// copy Christian to select caste
}
});
});
Since you didn't provide HTML, I have supplied a sample implementation. I also cleaned up your code. The main fix was to apply the change() function to the jquery selector, instead of to the Religion variable:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
var SelectCaste = $("#SelectCaste");
var Religion = $("#Religion"),
Hindu = $("#Hindu"),
Muslim = $("#Muslim"),
Christian = $("#Christian");
$("#Religion").change(function(){
Hindu.hide().attr('name', '');
Muslim.hide().attr('name', '');
Christian.hide().attr('name', '');
var sReligion = $(this).val();
if(sReligion=="1") {
SelectCaste.hide();
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>
<div id="SelectCaste">
<select id="Religion">
<option>- Select One -</option>
<option value="1">Hindu</option>
<option value="2">Muslim</option>
<option value="3">Christian</option>
</select>
</div>
<div id="Hindu">Hindu</div>
<div id="Muslim">Muslim</div>
<div id="Christian">Christian</div>
</body>
</html>
加载中,请稍侯......
精彩评论