Question

我遇到了jQuery attr（）的问题。这是我的代码：

$(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('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');
        }
    });
});

如果sReligion（实际上是一个选择框）值设置为'1'，则为Hindu设置属性。即， <select name='Caste' id="Hindu"><option value=''>Select Caste</option>...</select>

但是如果我改变sReligion值而不是'1'，那么该属性没有设置，name =“”，对于其他条件。

请建议我一个很好的解决方案..

提前致谢...

Answer 1

只需使用3个不同的名称进行3次选择，然后根据Religion值使用适当的名称。

此外，您只需使用jquery中的show / hide：

   if(sReligion=="1") {
        Hindu.show();
        Muslim.hide();
        Christian.hide();
    }

Answer 2

代码运行正常。问题出在Firebug HTML控制台上！它不会动态更新代码。对于selebox中的每个更改，我必须关闭并再次打开firebug控制台以查看更新的代码。

感谢Mohamed Nuur和meagar的及时帮助......

Answer 3

如果您尝试根据所选内容进行一次下拉，最好有一个select是可见的，其余的是隐藏的，但您只使用其内容。< / p>

$(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
        }
    });
});

Answer 4

由于您没有提供HTML，我提供了一个示例实现。我也清理了你的代码。主要的解决方法是将change（）函数应用于jquery选择器，而不是应用于Religion变量：

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

jQuery attr（）在动态更新时无法正常工作

4 个答案: