单选按钮列表和 Javascript 方法问题答案

【问题标题】：Radiobutton List and Javascript Methods problem单选按钮列表和 Javascript 方法问题
【发布时间】：2011-05-05 13:40:40
【问题描述】：

我有一个单选按钮列表：

<asp:RadioButtonList ID="rblConsentToReleaseInformation" runat="server" OnSelectedIndexChanged="rblConsentToReleaseInformation_SelectedIndexChanged">
                                <asp:ListItem Selected="True" Value="Emergency Contact" onclick="javascript:displayEmergencyContact()">Emergency Contact</asp:ListItem>
                                <asp:ListItem Value="Treatment Provider" onclick="javascript:displayTreatmentProvider()">Treatment Provider</asp:ListItem>
                                <asp:ListItem Value="Staff Contact" onclick="javascript:displayStaffContact()">Staff Contact</asp:ListItem>
                                <asp:ListItem Value="Financial Source" onclick="javascript:displayFinancialSource()">Financial Source</asp:ListItem>
                                <asp:ListItem Value="Insurance Provider" onclick="javascript:displayInsuranceProvider()">Insurance Provider</asp:ListItem>
                                <asp:ListItem Value="Other" onclick="javascript:displayOther()">Other</asp:ListItem>
                            </asp:RadioButtonList>

我对每个列表项都有 JS 函数，因为我想为每个列表项显示不同的下拉列表：

function displayEmergencyContact() {
        // get source id of radio button
        if (document.getElementById('MainContent_rblConsentToReleaseInformation_0').value == 'Emergency Contact') { 
            var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
            emergencyContact.style.display = 'block';
            var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
            treatmentProvider.style.display = 'none';
            var staffContact = document.getElementById("MainContent_ddlStaffContact");
            staffContact.style.display = 'none';
            var financialSource = document.getElementById("MainContent_ddlFinancialSource");
            financialSource.style.display = 'none';
            var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
            insuranceProvider.style.display = 'none';
            var other = document.getElementById("divOtherConsentToReleaseInformation");
            other.style.display = 'none';
        }
    }

    function displayTreatmentProvider() {
        if (document.getElementById('MainContent_rblConsentToReleaseInformation_1').value == 'Treatment Provider') {
            var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
            emergencyContact.style.display = 'none';
            var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
            treatmentProvider.style.display = 'block';
            var staffContact = document.getElementById("MainContent_ddlStaffContact");
            staffContact.style.display = 'none';
            var financialSource = document.getElementById("MainContent_ddlFinancialSource");
            financialSource.style.display = 'none';
            var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
            insuranceProvider.style.display = 'none';
            var other = document.getElementById("divOtherConsentToReleaseInformation");
            other.style.display = 'none';
        }
    }

    function displayStaffContact() {
        if (document.getElementById('MainContent_rblConsentToReleaseInformation_2').value == 'Staff Contact') {
            var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
            emergencyContact.style.display = 'none';
            var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
            treatmentProvider.style.display = 'none';
            var staffContact = document.getElementById("MainContent_ddlStaffContact");
            staffContact.style.display = 'block';
            var financialSource = document.getElementById("MainContent_ddlFinancialSource");
            financialSource.style.display = 'none';
            var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
            insuranceProvider.style.display = 'none';
            var other = document.getElementById("divOtherConsentToReleaseInformation");
            other.style.display = 'none';
        }
    }

    function displayFinancialSource() {
        if (document.getElementById('MainContent_rblConsentToReleaseInformation_3').value == 'Financial Source') {
            var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
            emergencyContact.style.display = 'none';
            var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
            treatmentProvider.style.display = 'none';
            var staffContact = document.getElementById("MainContent_ddlStaffContact");
            staffContact.style.display = 'none';
            var financialSource = document.getElementById("MainContent_ddlFinancialSource");
            financialSource.style.display = 'block';
            var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
            insuranceProvider.style.display = 'none';
            var other = document.getElementById("divOtherConsentToReleaseInformation");
            other.style.display = 'none';
        }
    }

    function displayInsuranceProvider() {
        if (document.getElementById('MainContent_rblConsentToReleaseInformation_4').value == 'Insurance Provider') {
            var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
            emergencyContact.style.display = 'none';
            var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
            treatmentProvider.style.display = 'none';
            var staffContact = document.getElementById("MainContent_ddlStaffContact");
            staffContact.style.display = 'none';
            var financialSource = document.getElementById("MainContent_ddlFinancialSource");
            financialSource.style.display = 'none';
            var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
            insuranceProvider.style.display = 'block';
            var other = document.getElementById("divOtherConsentToReleaseInformation");
            other.style.display = 'none';
        }
    }

    function displayOther() {
        if (document.getElementById('MainContent_rblConsentToReleaseInformation_5').value == 'Other') {
            var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
            emergencyContact.style.display = 'none';
            var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
            treatmentProvider.style.display = 'none';
            var staffContact = document.getElementById("MainContent_ddlStaffContact");
            staffContact.style.display = 'none';
            var financialSource = document.getElementById("MainContent_ddlFinancialSource");
            financialSource.style.display = 'none';
            var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
            insuranceProvider.style.display = 'none';
            var other = document.getElementById("divOtherConsentToReleaseInformation");
            other.style.display = 'block';
        }
    }

此代码无法正常工作。我希望一次显示一个下拉列表，而其他必须隐藏。任何帮助将不胜感激。

HTML 代码：

这是每个单选按钮的代码：

<table id="MainContent_rblConsentToReleaseInformation">

    <tr>

        <td><input id="MainContent_rblConsentToReleaseInformation_0" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Emergency Contact" checked="checked" onclick="javascript:displayEmergencyContact();" /><label for="MainContent_rblConsentToReleaseInformation_0">Emergency Contact</label></td>

    </tr><tr>

        <td><input id="MainContent_rblConsentToReleaseInformation_1" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Treatment Provider" onclick="javascript:displayTreatmentProvider();" /><label for="MainContent_rblConsentToReleaseInformation_1">Treatment Provider</label></td>

    </tr><tr>

        <td><input id="MainContent_rblConsentToReleaseInformation_2" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Staff Contact" onclick="javascript:displayStaffContact();" /><label for="MainContent_rblConsentToReleaseInformation_2">Staff Contact</label></td>

    </tr><tr>

        <td><input id="MainContent_rblConsentToReleaseInformation_3" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Financial Source" onclick="javascript:displayFinancialSource();" /><label for="MainContent_rblConsentToReleaseInformation_3">Financial Source</label></td>

    </tr><tr>

        <td><input id="MainContent_rblConsentToReleaseInformation_4" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Insurance Provider" onclick="javascript:displayInsuranceProvider();" /><label for="MainContent_rblConsentToReleaseInformation_4">Insurance Provider</label></td>

    </tr><tr>

        <td><input id="MainContent_rblConsentToReleaseInformation_5" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Other" onclick="javascript:displayOther();" /><label for="MainContent_rblConsentToReleaseInformation_5">Other</label></td>

    </tr>

</table>

我有 5 个带有下拉菜单的单选按钮，最后一个单选按钮有一个 div。 div代码如下：

<div class="formCol" id="divOtherConsentToReleaseInformation" style="display: none">

                        <div class="formLeftCol">

                            <table cellpadding="0" cellspacing="0">

                                <tr>

                                    <td>

                                        <div class="formFieldName">

                                            <span id="MainContent_lblFirstName">First Name:</span>

                                        </div>

                                    </td>

                                    <td>

                                        <div class="formFieldValue">

                                            <input name="ctl00$MainContent$txtFirstName" type="text" id="MainContent_txtFirstName" class="textEntry2" />

                                        </div>

                                    </td>

                                </tr>

                                <tr>

                                    <td>

                                        <div class="formFieldName">

                                            <span id="MainContent_lblLastName">Last Name:</span>

                                        </div>

                                    </td>

                                    <td>

                                        <div class="formFieldValue">

                                            <input name="ctl00$MainContent$txtLastName" type="text" id="MainContent_txtLastName" class="textEntry2" />

                                        </div>

                                    </td>

                                </tr>

                            </table>

                        </div>

                        <div class="formRightCol">

                            <table cellpadding="0" cellspacing="0">

                                <tr>

                                    <td>

                                        <div class="formFieldName">

                                            <span id="MainContent_lblInitial">Initial:</span>

                                        </div>

                                    </td>

                                    <td>

                                        <div class="formFieldValue">

                                            <input name="ctl00$MainContent$txtMiddleInit" type="text" id="MainContent_txtMiddleInit" class="textEntry2" />

                                        </div>

                                    </td>

                                </tr>

                            </table>

                        </div>

【问题讨论】：

您好，您介意发布 html 代码而不是 asp.net 吗？不是每个人都安装了 IIS。
是的，请发布 HTML 代码。
请查看更新后的代码，是否满足您的要求？
嗯，对象“MainContent_ddlEmergencyContact”，到目前为止，这些是您提到的下拉框吗？
是的，这些是下拉菜单。抱歉回复晚了

标签： javascript drop-down-menu radiobuttonlist

【解决方案1】：

根据您发布的源代码，javascript 工作正常。这是我用来测试你的javascript代码的html源代码：

<html>
    <head>
        <script>
        function displayEmergencyContact() 
        {
            // get source id of radio button
            if (document.getElementById('MainContent_rblConsentToReleaseInformation_0').value == 'Emergency Contact') { 
                var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
                emergencyContact.style.display = 'block';
                var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
                treatmentProvider.style.display = 'none';
                var staffContact = document.getElementById("MainContent_ddlStaffContact");
                staffContact.style.display = 'none';
                var financialSource = document.getElementById("MainContent_ddlFinancialSource");
                financialSource.style.display = 'none';
                var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
                insuranceProvider.style.display = 'none';
                var other = document.getElementById("divOtherConsentToReleaseInformation");
                other.style.display = 'none';
            }
        }

        function displayTreatmentProvider() {
            if (document.getElementById('MainContent_rblConsentToReleaseInformation_1').value == 'Treatment Provider') {
                var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
                emergencyContact.style.display = 'none';
                var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
                treatmentProvider.style.display = 'block';
                var staffContact = document.getElementById("MainContent_ddlStaffContact");
                staffContact.style.display = 'none';
                var financialSource = document.getElementById("MainContent_ddlFinancialSource");
                financialSource.style.display = 'none';
                var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
                insuranceProvider.style.display = 'none';
                var other = document.getElementById("divOtherConsentToReleaseInformation");
                other.style.display = 'none';
            }
        }

        function displayStaffContact() {
            if (document.getElementById('MainContent_rblConsentToReleaseInformation_2').value == 'Staff Contact') {
                var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
                emergencyContact.style.display = 'none';
                var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
                treatmentProvider.style.display = 'none';
                var staffContact = document.getElementById("MainContent_ddlStaffContact");
                staffContact.style.display = 'block';
                var financialSource = document.getElementById("MainContent_ddlFinancialSource");
                financialSource.style.display = 'none';
                var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
                insuranceProvider.style.display = 'none';
                var other = document.getElementById("divOtherConsentToReleaseInformation");
                other.style.display = 'none';
            }
        }

        function displayFinancialSource() {
            if (document.getElementById('MainContent_rblConsentToReleaseInformation_3').value == 'Financial Source') {
                var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
                emergencyContact.style.display = 'none';
                var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
                treatmentProvider.style.display = 'none';
                var staffContact = document.getElementById("MainContent_ddlStaffContact");
                staffContact.style.display = 'none';
                var financialSource = document.getElementById("MainContent_ddlFinancialSource");
                financialSource.style.display = 'block';
                var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
                insuranceProvider.style.display = 'none';
                var other = document.getElementById("divOtherConsentToReleaseInformation");
                other.style.display = 'none';
            }
        }

        function displayInsuranceProvider() {
            if (document.getElementById('MainContent_rblConsentToReleaseInformation_4').value == 'Insurance Provider') {
                var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
                emergencyContact.style.display = 'none';
                var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
                treatmentProvider.style.display = 'none';
                var staffContact = document.getElementById("MainContent_ddlStaffContact");
                staffContact.style.display = 'none';
                var financialSource = document.getElementById("MainContent_ddlFinancialSource");
                financialSource.style.display = 'none';
                var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
                insuranceProvider.style.display = 'block';
                var other = document.getElementById("divOtherConsentToReleaseInformation");
                other.style.display = 'none';
            }
        }

        function displayOther() {
            if (document.getElementById('MainContent_rblConsentToReleaseInformation_5').value == 'Other') {
                var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
                emergencyContact.style.display = 'none';
                var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
                treatmentProvider.style.display = 'none';
                var staffContact = document.getElementById("MainContent_ddlStaffContact");
                staffContact.style.display = 'none';
                var financialSource = document.getElementById("MainContent_ddlFinancialSource");
                financialSource.style.display = 'none';
                var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
                insuranceProvider.style.display = 'none';
                var other = document.getElementById("divOtherConsentToReleaseInformation");
                other.style.display = 'block';
            }
        }
        </script>
    </head>
    <body>
        <form name="testform" method="post">
            <table id="MainContent_rblConsentToReleaseInformation">
            <tr>
                <td><input id="MainContent_rblConsentToReleaseInformation_0" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Emergency Contact" checked="checked" onclick="javascript:displayEmergencyContact();" /><label for="MainContent_rblConsentToReleaseInformation_0">Emergency Contact</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_rblConsentToReleaseInformation_1" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Treatment Provider" onclick="javascript:displayTreatmentProvider();" /><label for="MainContent_rblConsentToReleaseInformation_1">Treatment Provider</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_rblConsentToReleaseInformation_2" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Staff Contact" onclick="javascript:displayStaffContact();" /><label for="MainContent_rblConsentToReleaseInformation_2">Staff Contact</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_rblConsentToReleaseInformation_3" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Financial Source" onclick="javascript:displayFinancialSource();" /><label for="MainContent_rblConsentToReleaseInformation_3">Financial Source</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_rblConsentToReleaseInformation_4" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Insurance Provider" onclick="javascript:displayInsuranceProvider();" /><label for="MainContent_rblConsentToReleaseInformation_4">Insurance Provider</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_rblConsentToReleaseInformation_5" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Other" onclick="javascript:displayOther();" /><label for="MainContent_rblConsentToReleaseInformation_5">Other</label></td>
            </tr>
            </table>
            <select id="MainContent_ddlEmergencyContact" style="display:block"><option>Liste1</option></select>
            <select id="MainContent_ddlTreatmentProvider" style="display:none"><option>Liste2</option></select>
            <select id="MainContent_ddlStaffContact" style="display:none"><option>Liste3</option></select>
            <select id="MainContent_ddlFinancialSource" style="display:none"><option>Liste4</option></select>
            <select id="MainContent_ddlInsuranceProvider" style="display:none"><option>Liste5</option></select>
            <div id="divOtherConsentToReleaseInformation" class="formLeftCol" style="display:none;">
                <!--div-->
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <div class="formFieldName">
                                    <span id="MainContent_lblFirstName">First Name:</span>
                                </div>
                            </td>
                            <td>
                                <div class="formFieldValue">
                                    <input name="ctl00$MainContent$txtFirstName" type="text" id="MainContent_txtFirstName" class="textEntry2" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="formFieldName">
                                    <span id="MainContent_lblLastName">Last Name:</span>
                                </div>
                            </td>
                            <td>
                                <div class="formFieldValue">
                                    <input name="ctl00$MainContent$txtLastName" type="text" id="MainContent_txtLastName" class="textEntry2" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="formRightCol">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <div class="formFieldName">
                                    <span id="MainContent_lblInitial">Initial:</span>
                                </div>
                            </td>
                            <td>
                                <div class="formFieldValue">
                                    <input name="ctl00$MainContent$txtMiddleInit" type="text" id="MainContent_txtMiddleInit" class="textEntry2" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            <!--/div-->
        </form>
    </body>
</html>

【讨论】：

其实最后一个不是单选按钮，它是一个带有一些文本字段的div
@asma 我使用了您发布的 HTML 代码。如果不正确，请更新这些。每个人，包括你自己，都讨厌猜测或预测。
所以我也更新了我的源代码。在我将属性 id 和 style 添加到第一个 div 元素之后，它工作正常。
是的，我能理解。但它在我身边不起作用。我卡住了！
我使用以下浏览器测试了我的代码：IE6 (IEtester)、IE7、IE8、Safari 5.04.、Chrom 11.0.96x、FF 2.0.20、FF 3.6.17，它确实有效。 FF4的错误控制台是否显示错误信息？

【解决方案2】：

Try this
add Jquery library
add class 'show_list' to ur drop down container. when u click this container it will be        visible and remaining will hide.
<script type="text/javascript">
$(document).ready(function(){
    $('.show_list').click(function(){
     $('.show_list').hide();
      $(this).show();
   }); 
});
</script>

【讨论】：

【解决方案3】：

感谢大家帮助我。我有问题。它是：一些下拉列表具有属性 Visible="False" 这就是它们无法正常工作的原因。现在它工作得很好。再次感谢。快乐编码:)

【讨论】：