堆栈内存溢出
  繁体   English   中英

根据单选按钮选择在下拉列表中显示项目

[英]Display Item in dropdown based on Radio button selection

 原文  2020-11-17 06:45:16  4   1    javascript/ html/ bootstrap-4/ radio-button

问题描述

我想根据用户选择的单选按钮在我的下拉列表中显示特定项目。

两种选择是财务变更和非财务变更。 因此，如果我选择财务变更单选按钮。 下拉菜单只显示财务变动下方的值。

这是代码

       <div class="col-sm-2">
                                                        <div class="form-group m-0 m-b-15">
                                                            <label>Type of Alteration Request</label>
                                                            <div class="radio radio-custom m-t-5">
                                                                <input type="radio" name="q3" value="1" id="5a">
                                                                <label for="5a">
                                                                    Financial
                                                                </label>
                                                                <input type="radio" name="q3" value="1" id="5b"
                                                                    style="margin-left: 30px;">
                                                                <label for="5b" style="margin-left: 30px;">
                                                                    Non-Financial
                                                                </label>

                                                            </div>
                                                        </div>
                                                    </div>



                                                    <div class="col-sm-4">
                                                        <div class="form-group m-0 m-b-15">
                                                            <label for="textfield" class="control-label">Endorsement
                                                                Type</label>

                                                            <div class="controls controls-row">
                                                                <select class="form-control" data-rule-required="true"
                                                                    id="EndorsementType" name="EndorsementType">
                                                                    <option value="">-- Non-Financial Alterations --</option>

                                                                    <option value="Add/ Remove Exclusion">Add/ Remove Exclusion</option>
                                                                    <option value="Add/ Remove/ Update Beneficiary / Nominee ">Add/ Remove/ Update Beneficiary / Nominee </option>
                                                                    <option value="Address Change ( Correspondence )/ (Permanent)/ (Business)"> Address Change ( Correspondence )/ (Permanent)/ (Business)</option>
                                                                    <option value="Change In Correspondence Flag ">Change In Correspondence Flag </option>
                                                                    <option value="NIC Change ">NIC Change </option>
                                                                    <option value="Client Name Change ">Client Name Change   </option>
                                                                    <option value="Duplicate Policy Schedule">Duplicate Policy Schedule</option>
                                                                    <option value="Change in Guardian">Change in Guardian</option>
                                                                    <option value="Client misc data change"> Client misc data change</option>
                                                                    <option value="Change in occupation"> Change in occupation</option>
                                                                    <option value="Change in Height/Weight"> Change in Height/Weight</option>
                                                                    <option value="Change in phone number"> Change in phone number</option>
                                                                    <option value="Account number updated "> Account number updated </option>
                                                                    <option value="Change in email address"> Change in email address</option>
                                                                    <option value="Policy assignmnent"> Policy assignmnent</option>
                                                                    <option value="Change mail to address"> Change mail to address</option>
                                                                    <option value="Change in health status/hazard">Change in health status/hazard</option>
                                                                 
<!--FInancial Alterations-->
                                                                        <option value="">-- Financial Alterations --</option>

                                                                        <option value="Addition/ Deletion Of Riders ">Addition/ Deletion Of Riders </option>
                                                                        <option value="Mode Change (Small To Big) / (Big to Small)">Mode Change (Small To Big) / (Big to Small) </option>
                                                                        <option value="Premium De-Allocation "> Premium De-Allocation </option>
                                                                        <option value="Premium Increase/ Decrease">Premium Increase/ Decrease </option>
                                                                        <option value="Sum Assured Decreased/ Increase ">Sum Assured Decreased/ Increase </option>
                                                                        <option value="Agent Change">Agent Change  </option>
                                                                        <option value="Cancel Policy - Company Initiated ">Cancel Policy - Company Initiated </option>
                                                                        <option value="Policy Cancelled On Client Request">Policy Cancelled On Client Request</option>
                                                                        <option value="Policy Surrender"> Policy Surrender</option>
                                                                        <option value="Partial Surrender "> Partial Surrender </option>
                                                                        <option value="Reinstatement Entry - Individual ">Reinstatement Entry - Individual </option>
                                                                        <option value="Unit Movement"> Unit Movement</option>
                                                                        <option value="Benefit term increase/decrease "> Benefit term increase/decrease</option>
                                                                        <option value="Gender correction"> Gender correction</option>
                                                                        <option value="Esclatation rate change /Growth Rate change "> Esclatation rate change /Growth Rate change </option>
                                                                        <option value="Add/remove extra mortality"> Add/remove extra mortality</option>
                                                                        <option value="Change fund distribution">Change fund distribution</option>
                                                                        <option value="Adjustment in NAV"> Adjustment in NAV</option>
                                                                        <option value="Special/Extra special reinstatement "> Special/Extra special reinstatement </option>
                                                                        <option value="Commencement Date Change ">Commencement Date Change </option>
                                                                        <option value="Plan Conversion"> Plan Conversion</option>
                                                                        <option value="Client Date Of Birth Change (Financial)  "> Client Date Of Birth Change (Financial) </option>
                                                                        <option value="Adhoc Surrender"> Adhoc Surrender</option>
                                                                        <option value="Matuarity "> Matuarity</option>
                                                                        <option value="Renewals/Lapse"> Renewals/Lapse</option>
                                                                        <option value="ANF/Paid UP">ANF/Paid UP</option>





                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>

1 个解决方案

解决方案1
 3 已采纳  2020-11-17 07:05:27

我在这里为你做了一个例子。 该示例基本上是以下步骤：

  1. 标记您的 HTML

     <input type="radio" name="group" value="1" checked /> <label>Radio 2</label> <input type="radio" name="group" value="2" /> <label>Radio 3</label> <input type="radio" name="group" value="3" /> <div> <select id="drop1"> <option>DropDown 1</option> </select> <select id="drop2" class="no-display"> <option>DropDown 2</option> </select> <select id="drop3" class="no-display"> <option>DropDown 3</option> </select> </div>

  2. 添加 CSS

    .no-display {display: none;}

  3. 将事件侦听器添加到调用下拉选择功能的单选按钮

    for (var i = 0; i < radio_buttons.length; i++) { radio_buttons[i].addEventListener("change", setDropDown); } function setDropDown() { setDropDownsForNoDisplay(); if (this.checked) { setDropDownForDisplay(this.value); } }

  4. 添加下拉选择函数使用的辅助函数

    function setDropDownsForNoDisplay() { for (var i = 0; i < dropdowns.length; i++) { dropdowns[i].classList.add("no-display"); } } function setDropDownForDisplay(x) { if (x === "1") { document.getElementById("drop1").classList.remove("no-display"); } else if (x === "2") { document.getElementById("drop2").classList.remove("no-display"); } else if (x === "3") { document.getElementById("drop3").classList.remove("no-display"); } }

您也可以直接在单选按钮标记中使用事件（“onclick”、“onchange”）而不是添加事件侦听器，但我更喜欢将我的事件与标记分开。

这是代码段运行： 

 var radio_buttons = document.getElementsByName("group"); for (var i = 0; i < radio_buttons.length; i++) { radio_buttons[i].addEventListener("change", setDropDown); } function setDropDown() { setDropDownsForNoDisplay(); if (this.checked) { setDropDownForDisplay(this.value); } } var dropdowns = document.getElementsByTagName("select"); function setDropDownsForNoDisplay() { for (var i = 0; i < dropdowns.length; i++) { dropdowns[i].classList.add("no-display"); } } function setDropDownForDisplay(x) { if (x === "1") { document.getElementById("drop1").classList.remove("no-display"); } else if (x === "2") { document.getElementById("drop2").classList.remove("no-display"); } else if (x === "3") { document.getElementById("drop3").classList.remove("no-display"); } }
 .no-display {display: none;}
 <label>Radio 1</label> <input type="radio" name="group" value="1" checked /> <label>Radio 2</label> <input type="radio" name="group" value="2" /> <label>Radio 3</label> <input type="radio" name="group" value="3" /> <div> <select id="drop1"> <option>DropDown 1</option> </select> <select id="drop2" class="no-display"> <option>DropDown 2</option> </select> <select id="drop3" class="no-display"> <option>DropDown 3</option> </select> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据单选按钮显示不同的结果 显示HTML表单，基于单选按钮的选择 在基于单选按钮选择的提交显示div上 根据单选按钮选择将下拉菜单的值和显示名称更改为SQL查询结果 使用jQuery基于下拉选择选择单选按钮 JQuery代码，用于根据单选按钮选择更改可选择的下拉选项 根据单选按钮选择显示/隐藏输入字段 如何根据单选按钮选择以特定跨度样式显示文本？ 根据单选按钮的选择分别为列中的单元格切换输入显示 根据单选按钮和复选框选择显示不同的文本
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM