Проблема со списком радиокнопок и методами Javascript

У меня есть список переключателей:

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

javascript drop-down-menu radiobuttonlist
person asma    schedule 04.05.2011    source источник
comment
Здравствуйте, не могли бы вы опубликовать html-код вместо asp.net? Не все установили IIS.   -  person Reporter    schedule 04.05.2011
comment
Да, пожалуйста, опубликуйте HTML-код.   -  person ThiefMaster    schedule 04.05.2011
comment
Пожалуйста, посмотрите обновленный код, если ваше требование выполнено?   -  person asma    schedule 04.05.2011
comment
Хм, объект MainContent_ddlEmergencyContact и пока это выпадающие списки, о которых вы упомянули?   -  person Reporter    schedule 04.05.2011
comment
да, это выпадающие списки. Извините за поздний ответ   -  person asma    schedule 04.05.2011

Ответы (2)


arrow_upward
0
arrow_downward

согласно вашему опубликованному исходному коду, javascript работает нормально. Вот мой исходный код html, который я использовал для проверки вашего кода javascript:

<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>
person Reporter    schedule 04.05.2011
comment
на самом деле последний не является переключателем, это div с несколькими текстовыми полями - person asma; 04.05.2011
comment
@asma Я использовал ваш опубликованный HTML-код. Если это не так, то, пожалуйста, обновите их. Все, включая вас самих, ненавидят гадать или предсказывать. - person Reporter; 04.05.2011
comment
Поэтому я тоже обновил исходный код. И он отлично работает после того, как я добавил атрибуты id и style к первому элементу div. - person Reporter; 04.05.2011
comment
да я могу понять. Но это не работает на моей стороне. Я застрял! - person asma; 04.05.2011
comment
Я протестировал свой код со следующими браузерами: IE6 (IEtester), IE7, IE8, Safari 5.04., Chrom 11.0.96x, FF 2.0.20, FF 3.6.17, и он действительно работал. Показывает ли консоль ошибок FF4 сообщение об ошибке? - person Reporter; 04.05.2011
comment
IE8 выдает ошибку: ошибка времени выполнения Microsoft JScript: требуется объект - person asma; 04.05.2011
comment
Тогда у вас проблемы. Мой IE8 ничего не отображает, и он использует параметры Показать ошибки скрипта (активно), Отключить отладку скрипта (не активно). - person Reporter; 04.05.2011
comment
@reporter: ты очень помог. Спасибо :) - person asma; 05.05.2011

arrow_upward
0
arrow_downward

Спасибо всем, ребята, за помощь. У меня проблема. Это было так: у некоторых выпадающих списков было свойство Visible="False", поэтому они не работали нормально. Теперь он работает отлично. Спасибо еще раз. Удачного кодирования :)

person asma    schedule 05.05.2011