Проблема с списком радиокнопок и методами Javascript - PullRequest
Новая
       14

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

0 голосов
/ 04 мая 2011

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

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

Ответы [ 3 ]

0 голосов
/ 04 мая 2011 
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>
0 голосов
/ 05 мая 2011

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

0 голосов
/ 04 мая 2011

в соответствии с вашим опубликованным исходным кодом, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...