根据单选按钮选择在下拉列表中显示项目
Display Item in dropdown based on Radio button selection
我想根据用户 selected 单选按钮在我的下拉列表中显示特定项目。
两个选项分别是Financial Alteration和Non-Financial Alteration。因此，如果我 select 财务变更单选按钮。下拉菜单仅显示财务变更下方的值。
这是代码
<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>
我在这里为你做了一个例子。
该示例基本上是以下步骤：
标记你的 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>
添加CSS
.no-display {display: none;}
将事件侦听器添加到调用下拉选择功能的单选按钮
for (var i = 0; i < radio_buttons.length; i++) {
radio_buttons[i].addEventListener("change", setDropDown);
}
function setDropDown() {
setDropDownsForNoDisplay();
if (this.checked) {
setDropDownForDisplay(this.value);
}
}
添加下拉选择功能使用的辅助函数
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>
我想根据用户 selected 单选按钮在我的下拉列表中显示特定项目。
两个选项分别是Financial Alteration和Non-Financial Alteration。因此，如果我 select 财务变更单选按钮。下拉菜单仅显示财务变更下方的值。
这是代码
<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>
我在这里为你做了一个例子。 该示例基本上是以下步骤：
标记你的 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>添加CSS
.no-display {display: none;}将事件侦听器添加到调用下拉选择功能的单选按钮
for (var i = 0; i < radio_buttons.length; i++) { radio_buttons[i].addEventListener("change", setDropDown); } function setDropDown() { setDropDownsForNoDisplay(); if (this.checked) { setDropDownForDisplay(this.value); } }添加下拉选择功能使用的辅助函数
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>