如何根據下拉選擇顯示值

Question

這里實際上有3個下拉菜單，當我根據第2個下拉列表中的值自動填充選擇第一個下拉選項時...在第2個下拉列表中，如果我們根據任何選擇將在第3個下拉列表中自動填充的選項進行選擇。 。實際上，這里的所有內容均正確填充..但這里存在一個問題。

假設在第一個下拉菜單中我選擇bfs，因為它將在第二個下拉菜單中生成..然后再次如果我在第一個下拉菜單中選擇“ select option”，則在第二個下拉菜單中bfs的先前值仍然存在。選項'沒有子分支..然后它將在第二個下拉列表中顯示為空...但是在我的代碼中，其顯示如下：。任何人都可以幫助我解決這個問題..

我是新來的人。.如果有什么問題對不起，謝謝。

 function change() { var val = type.options[type.selectedIndex].value; console.log(val); if (val == "BFS") { $("#serviceline").html("<option value='select'>Select</option><option value='Reconciliations'>Reconciliations</option><option value='clearing/settlement'>clearing/settlement</option><option value='ClientOnboarding'>Client Onboarding</option><option value='Finance Valuations'>Finance Valuations</option><option value='Collateral&Margin Management'>Collateral&Margin Management</option><option value='Corporate Actions'>Corporate Actions</option><option value='Treasury Services'>Treasury services</option><option value='Reference Data Management'>Reference Data management</option><option value='Security Borrowing & Lending'>Security Borrowing & Lending</option><option value='payments Processing'>Payments Processing</option><option value='Safe Keeping and Custody'>Safe Keeping and Custody</option>"); } else if (val == "Insurance") { $("#serviceline").html("<option value='P & C Insurance - Consumer'>P & C Insurance - Consumer</option><option value='PCInsuranceCommercial'>P & C Insurance - Commercial</option><option value='LifeInsurancePolicyIssuance'>Life Insurance Policy Issuance</option><option value='LifeInsurancePolicyMaintenance'>Life Insurance Policy Maintenance</option><option value='LifeInsuranceClaims'>Life Insurance Claims</option><option value='LifeInsuranceContactCenter'>Life Insurance Contact Center</option><option value='life Contact center'>Life Contact-center</option><option value='AnnuitiesBusinessPolicyIssurance'>Annuities-Business-PolicyIssurance</option><option value='Annuities-PolicyOwnerServices'>Annuities- Policy Owner Services</option></option><option value='Annuities claims'>Annuities claims</option><option value='AnnuitiesSettlementDistributionMgmt'>Annuities - Settlement & Distribution Mgmt</option>"); } else if (val == "Healthcare") { $("#serviceline").html("<option value='Payers-BenefitConfiguration'>Payers - Benefit Configuration</option><option value='PayersMembershipBilling'>Payers -Membership & Billing</option><option value='PayersProviderDataManagement'>Payers-Provider Data Management</option><option value='PayersClaims'>Payers- Claims</option><option value='PayersMedicalManagement'>Payers-Medical Management</option><option value='PayersMembershipBilling'>Payers -Membership & Billing</option><option value='PayersProviderDataManagement'>Payers-Provider Data Management</option><option value='PayersClaims'>Payers- Claims</option><option value='PayersContactCenter'>Payers-Contact Center</option><option value='ProvidersPhysician'>Providers-Physician</option><option value='Providers-Pharmacy'>Providers-Pharmacy</option><option value='Providers-Durable Medical Equipment'>Providers-Durable Medical Equipment</option><option value='ProvidersHospitalandPAS'>Providers -Hospital and PAS</option>"); } else if (val == "F&A") { $("#serviceline").html("<option value='sourcetopay'>source to pay</option><option value='OrdertoCash'>Order to Cash</option><option value='Record to Report'>Record to Report</option><option value='FP&A'>FP&A</option><option value='Payroll Processing'>Payroll Processing</option>"); } else if (val == "Technology") { $("#serviceline").html("<option value='LDO'>LDO</option><option value='Product Support'>Product Support</option><option value='Digital Marketing'>Digital Marketing</option><option value='Content Management'>Content management</option>"); } else if (val == "Banking & Lending") { $("#serviceline").html("<option value='Escrow Services'>Escrow Services</option><option value='Loan Services'>Loan services</option><option value='Data Management Utility'>Data Management Utility</option>"); } else if (val == "P & R") { $("#serviceline").html("<option value='L1 Service Desk'>L1 Service Desk</option><option value='L2 Service Desk'>L2 Service Desk</option><option value='Customer Service'>Customer Service</option>"); } else if (val == "Life Sciences") { $("#serviceline").html("<option value='ClinicalDataManagement'>Clinical Data Management</option><option value='PharmacoVigilance'>Pharmaco-Vigilance</option><option value='MedicalWriting'>Medical Writing</option><option value='Regulatory Affairs'>Regulatory Affairs</option><option value='Bio Statistics'>Bio Statistics</option>"); } else if (val == "IME") { $("#serviceline").html("<option value='Content Management'>Content Management</option><option value='Customer Experience Management'>Customer Experience Management</option>"); } } function change1() { var values = serviceline.options[serviceline.selectedIndex].value; if (values == "Reconciliations") { $("#subservice").html("<option value='InternalReconciliations'>Internal Reconciliations</option><option value='ExternalReconciliations'>External Reconciliations</option><option value='RecOnboarding'>Rec- Onboarding</option>"); } else if (values == "ClientOnboarding") { $("#subservice").html("<option value='OnboardingRequestInitiation'>Onboarding Request Initiation</option><option value='ClientDueDiligence'>Client Due Diligence</option><option value='ContractualLegaSetUp'>Contractual / Legal Set Up</option><option value='ClientAccountSetup'>Client Account Set up</option>"); } else if (values == "PCInsuranceCommercial") { $("#subservice").html("<option value='IllustrationandQuotes'>Illustration and Quotes</option><option value='PolicyAdministration'>Policy Administration</option><option value='MoneyInandRefunds'>Money-In and Refunds</option><option value='MoneyOutTransfers'>Money Out & Transfers</option>"); } else if (values == "LifeInsurancePolicyMaintenance") { $("#subservice").html("<option value='IllustrationandQuotes'>Illustration and Quotes</option><option value='PolicyAdministration'>Policy Administration</option><option value='MoneyInandRefunds'>Money-In and Refunds</option><option value='MoneyOutTransfers'>Money Out & Transfers</option>"); } else if (values == "AnnuitiesBusinessPolicyIssurance") { $("#subservice").html("<option value='ImagingandScanning'>Imaging and Scanning</option><option value='Indexing'>Indexing</option><option value='CashOpsandFunding'>Cash Ops and Funding</option><option value='ContractSetUpandNIGOresolution'>Contract Set Up and NIGO resolution</option><option value='TOAProcess'>TOA Process</option><option value='PolicyIssuance'>Policy Issuance</option>"); } else if (values == "PayersMembershipBilling") { $("#subservice").html("<option value='CaseInstallation/GroupSetup'>Case Installation/Group Set up</option><option value='MemberLevelSetup/Enrollment'>Member Level Set up/Enrollment</option><option value='WelcomeKit'>Welcome Kit</option><option value='Maintenance'>Maintenance</option><option value='Billing/Reconciliation'>Billing/Reconciliation</option>"); } else if (values == "PayersMedicalManagement") { $("#subservice").html("<option value='UtilizationManagement'>Utilization Management</option><option value='CaseManagement'>Case Management</option><option value='Disease Management'>Disease Management</option><option value='ComplianceandAccreditation'>Compliance and Accreditation</option>"); } else if (values == "ProvidersPhysician") { $("#subservice").html("<option value='Pre-Service'>Pre-Service</option><option value='Service'>Service</option><option value='Post Service'>Post Service</option>"); } else if (values == "ProvidersHospitalandPAS") { $("#subservice").html("<option value='Pre-Service'>Pre-Service</option><option value='Service'>Service</option><option value='Post Service'>Post Service</option>"); } else if (values == "OrdertoCash") { $("#subservice").html("<option value='MasterDataManagement'>Master Data Management</option><option value='Order Management'>Order Management</option><option value='InvoicetoCash'>Invoice to Cash</option>"); } else if (values == "sourcetopay") { $("#subservice").html("<option value='Sourcing'>Sourcing</option><option value='SupplierAdministration'>Supplier Administration</option><option value='Goods Receipt'>Goods Receipt</option><option value='InvoiceProcessingandPayments'>Invoice Processing and Payments</option><option value='ControllershipandComplianceActivities'>Controllership and Compliance Activities</option>"); } else if (values == "ClinicalDataManagement") { $("#subservice").html("<option value='SetUp'>Set Up</option><option value='Conduct'>Conduct</option><option value='LPLV to DB Lock'>LPLV to DB Lock</option><option value='Post Lock'>Post Lock</option>"); } else if (values == "PharmacoVigilance") { $("#subservice").html("<option value='Case Management'>Case Management</option><option value='Aggregate Safety Reporting'>Aggregate Safety Reporting</option><option value='Signaldetection'>Signal detection</option><option value='RiskManagement'>Risk Management</option>"); } else if (values == "MedicalWriting") { $("#subservice").html("<option value='PreStudySetUp'>Pre Study Set Up</option><option value='Study Set Up'>Study Set Up</option><option value='Conduct'>Conduct</option><option value='Closure'>Closure</option><option value='PostClosure'>Post Closure</option>"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> Vertical Name <select id="type" required onchange="change()"> <option value="select">---select---</option> <option value="BFS">BFS</option> <option value="Insurance">Insurance</option> <option value="Healthcare">Health care</option> <option value="F&A">F&A</option> <option value="Technology">Technology</option> <option value="Banking & Lending">Banking & Lending</option> <option value="P & R">P & R</option> <option value="Life Sciences">Life Sciences</option> <option value="IME">IME</option> </select> </td> <td>Service Line <select id="serviceline" onchange="change1()"> <option value=""></option> </select> </td> <td> <select id="subservice" id="subservice" multiple="multiple"> <option value=""></option> </select> </td> </tr> </table> 

Answer 1

在change（）函數的末尾添加else{$("#serviceline").html("");$("#subservice").html("");} 。第1st dropdown is "select" 。其他兩個下拉選項很明確

 function change() { var val = type.options[type.selectedIndex].value; console.log(val); if (val == "BFS") { $("#serviceline") .html( "<option value='select'>Select</option><option value='Reconciliations'>Reconciliations</option><option value='clearing/settlement'>clearing/settlement</option><option value='ClientOnboarding'>Client Onboarding</option><option value='Finance Valuations'>Finance Valuations</option><option value='Collateral&Margin Management'>Collateral&Margin Management</option><option value='Corporate Actions'>Corporate Actions</option><option value='Treasury Services'>Treasury services</option><option value='Reference Data Management'>Reference Data management</option><option value='Security Borrowing & Lending'>Security Borrowing & Lending</option><option value='payments Processing'>Payments Processing</option><option value='Safe Keeping and Custody'>Safe Keeping and Custody</option>"); } else if (val == "Insurance") { $("#serviceline") .html( "<option value='P & C Insurance - Consumer'>P & C Insurance - Consumer</option><option value='PCInsuranceCommercial'>P & C Insurance - Commercial</option><option value='LifeInsurancePolicyIssuance'>Life Insurance Policy Issuance</option><option value='LifeInsurancePolicyMaintenance'>Life Insurance Policy Maintenance</option><option value='LifeInsuranceClaims'>Life Insurance Claims</option><option value='LifeInsuranceContactCenter'>Life Insurance Contact Center</option><option value='life Contact center'>Life Contact-center</option><option value='AnnuitiesBusinessPolicyIssurance'>Annuities-Business-PolicyIssurance</option><option value='Annuities-PolicyOwnerServices'>Annuities- Policy Owner Services</option></option><option value='Annuities claims'>Annuities claims</option><option value='AnnuitiesSettlementDistributionMgmt'>Annuities - Settlement & Distribution Mgmt</option>"); } else if (val == "Healthcare") { $("#serviceline") .html( "<option value='Payers-BenefitConfiguration'>Payers - Benefit Configuration</option><option value='PayersMembershipBilling'>Payers -Membership & Billing</option><option value='PayersProviderDataManagement'>Payers-Provider Data Management</option><option value='PayersClaims'>Payers- Claims</option><option value='PayersMedicalManagement'>Payers-Medical Management</option><option value='PayersMembershipBilling'>Payers -Membership & Billing</option><option value='PayersProviderDataManagement'>Payers-Provider Data Management</option><option value='PayersClaims'>Payers- Claims</option><option value='PayersContactCenter'>Payers-Contact Center</option><option value='ProvidersPhysician'>Providers-Physician</option><option value='Providers-Pharmacy'>Providers-Pharmacy</option><option value='Providers-Durable Medical Equipment'>Providers-Durable Medical Equipment</option><option value='ProvidersHospitalandPAS'>Providers -Hospital and PAS</option>"); } else if (val == "F&A") { $("#serviceline") .html( "<option value='sourcetopay'>source to pay</option><option value='OrdertoCash'>Order to Cash</option><option value='Record to Report'>Record to Report</option><option value='FP&A'>FP&A</option><option value='Payroll Processing'>Payroll Processing</option>"); } else if (val == "Technology") { $("#serviceline") .html( "<option value='LDO'>LDO</option><option value='Product Support'>Product Support</option><option value='Digital Marketing'>Digital Marketing</option><option value='Content Management'>Content management</option>"); } else if (val == "Banking & Lending") { $("#serviceline") .html( "<option value='Escrow Services'>Escrow Services</option><option value='Loan Services'>Loan services</option><option value='Data Management Utility'>Data Management Utility</option>"); } else if (val == "P & R") { $("#serviceline") .html( "<option value='L1 Service Desk'>L1 Service Desk</option><option value='L2 Service Desk'>L2 Service Desk</option><option value='Customer Service'>Customer Service</option>"); } else if (val == "Life Sciences") { $("#serviceline") .html( "<option value='ClinicalDataManagement'>Clinical Data Management</option><option value='PharmacoVigilance'>Pharmaco-Vigilance</option><option value='MedicalWriting'>Medical Writing</option><option value='Regulatory Affairs'>Regulatory Affairs</option><option value='Bio Statistics'>Bio Statistics</option>"); } else if (val == "IME") { $("#serviceline") .html( "<option value='Content Management'>Content Management</option><option value='Customer Experience Management'>Customer Experience Management</option>"); } } function change1() { var values = serviceline.options[serviceline.selectedIndex].value; if (values == "Reconciliations") { $("#subservice") .html( "<option value='InternalReconciliations'>Internal Reconciliations</option><option value='ExternalReconciliations'>External Reconciliations</option><option value='RecOnboarding'>Rec- Onboarding</option>"); } else if (values == "ClientOnboarding") { $("#subservice") .html( "<option value='OnboardingRequestInitiation'>Onboarding Request Initiation</option><option value='ClientDueDiligence'>Client Due Diligence</option><option value='ContractualLegaSetUp'>Contractual / Legal Set Up</option><option value='ClientAccountSetup'>Client Account Set up</option>"); } else if (values == "PCInsuranceCommercial") { $("#subservice") .html( "<option value='IllustrationandQuotes'>Illustration and Quotes</option><option value='PolicyAdministration'>Policy Administration</option><option value='MoneyInandRefunds'>Money-In and Refunds</option><option value='MoneyOutTransfers'>Money Out & Transfers</option>"); } else if (values == "LifeInsurancePolicyMaintenance") { $("#subservice") .html( "<option value='IllustrationandQuotes'>Illustration and Quotes</option><option value='PolicyAdministration'>Policy Administration</option><option value='MoneyInandRefunds'>Money-In and Refunds</option><option value='MoneyOutTransfers'>Money Out & Transfers</option>"); } else if (values == "AnnuitiesBusinessPolicyIssurance") { $("#subservice") .html( "<option value='ImagingandScanning'>Imaging and Scanning</option><option value='Indexing'>Indexing</option><option value='CashOpsandFunding'>Cash Ops and Funding</option><option value='ContractSetUpandNIGOresolution'>Contract Set Up and NIGO resolution</option><option value='TOAProcess'>TOA Process</option><option value='PolicyIssuance'>Policy Issuance</option>"); } else if (values == "PayersMembershipBilling") { $("#subservice") .html( "<option value='CaseInstallation/GroupSetup'>Case Installation/Group Set up</option><option value='MemberLevelSetup/Enrollment'>Member Level Set up/Enrollment</option><option value='WelcomeKit'>Welcome Kit</option><option value='Maintenance'>Maintenance</option><option value='Billing/Reconciliation'>Billing/Reconciliation</option>"); } else if (values == "PayersMedicalManagement") { $("#subservice") .html( "<option value='UtilizationManagement'>Utilization Management</option><option value='CaseManagement'>Case Management</option><option value='Disease Management'>Disease Management</option><option value='ComplianceandAccreditation'>Compliance and Accreditation</option>"); } else if (values == "ProvidersPhysician") { $("#subservice") .html( "<option value='Pre-Service'>Pre-Service</option><option value='Service'>Service</option><option value='Post Service'>Post Service</option>"); } else if (values == "ProvidersHospitalandPAS") { $("#subservice") .html( "<option value='Pre-Service'>Pre-Service</option><option value='Service'>Service</option><option value='Post Service'>Post Service</option>"); } else if (values == "OrdertoCash") { $("#subservice") .html( "<option value='MasterDataManagement'>Master Data Management</option><option value='Order Management'>Order Management</option><option value='InvoicetoCash'>Invoice to Cash</option>"); } else if (values == "sourcetopay") { $("#subservice") .html( "<option value='Sourcing'>Sourcing</option><option value='SupplierAdministration'>Supplier Administration</option><option value='Goods Receipt'>Goods Receipt</option><option value='InvoiceProcessingandPayments'>Invoice Processing and Payments</option><option value='ControllershipandComplianceActivities'>Controllership and Compliance Activities</option>"); } else if (values == "ClinicalDataManagement") { $("#subservice") .html( "<option value='SetUp'>Set Up</option><option value='Conduct'>Conduct</option><option value='LPLV to DB Lock'>LPLV to DB Lock</option><option value='Post Lock'>Post Lock</option>"); } else if (values == "PharmacoVigilance") { $("#subservice") .html( "<option value='Case Management'>Case Management</option><option value='Aggregate Safety Reporting'>Aggregate Safety Reporting</option><option value='Signaldetection'>Signal detection</option><option value='RiskManagement'>Risk Management</option>"); } else if (values == "MedicalWriting") { $("#subservice") .html( "<option value='PreStudySetUp'>Pre Study Set Up</option><option value='Study Set Up'>Study Set Up</option><option value='Conduct'>Conduct</option><option value='Closure'>Closure</option><option value='PostClosure'>Post Closure</option>"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> Vertical Name <select id="type" required onchange="change()"> <option value="select">---select---</option> <option value="BFS">BFS</option> <option value="Insurance">Insurance</option> <option value="Healthcare">Health care</option> <option value="F&A">F&A</option> <option value="Technology">Technology</option> <option value="Banking & Lending">Banking & Lending</option> <option value="P & R">P & R</option> <option value="Life Sciences">Life Sciences</option> <option value="IME">IME</option> </select> </td> <td>Service Line <select id="serviceline" onchange="change1()"> <option value=""></option> </select> </td> <td> <select id="subservice" id="subservice" multiple="multiple"> <option value=""></option> </select> </td> </tr> </table> 

 function change() { var val = type.options[type.selectedIndex].value; console.log(val); if (val == "BFS") { $("#serviceline").html("<option value='select'>Select</option><option value='Reconciliations'>Reconciliations</option><option value='clearing/settlement'>clearing/settlement</option><option value='ClientOnboarding'>Client Onboarding</option><option value='Finance Valuations'>Finance Valuations</option><option value='Collateral&Margin Management'>Collateral&Margin Management</option><option value='Corporate Actions'>Corporate Actions</option><option value='Treasury Services'>Treasury services</option><option value='Reference Data Management'>Reference Data management</option><option value='Security Borrowing & Lending'>Security Borrowing & Lending</option><option value='payments Processing'>Payments Processing</option><option value='Safe Keeping and Custody'>Safe Keeping and Custody</option>"); } else if (val == "Insurance") { $("#serviceline").html("<option value='P & C Insurance - Consumer'>P & C Insurance - Consumer</option><option value='PCInsuranceCommercial'>P & C Insurance - Commercial</option><option value='LifeInsurancePolicyIssuance'>Life Insurance Policy Issuance</option><option value='LifeInsurancePolicyMaintenance'>Life Insurance Policy Maintenance</option><option value='LifeInsuranceClaims'>Life Insurance Claims</option><option value='LifeInsuranceContactCenter'>Life Insurance Contact Center</option><option value='life Contact center'>Life Contact-center</option><option value='AnnuitiesBusinessPolicyIssurance'>Annuities-Business-PolicyIssurance</option><option value='Annuities-PolicyOwnerServices'>Annuities- Policy Owner Services</option></option><option value='Annuities claims'>Annuities claims</option><option value='AnnuitiesSettlementDistributionMgmt'>Annuities - Settlement & Distribution Mgmt</option>"); } else if (val == "Healthcare") { $("#serviceline").html("<option value='Payers-BenefitConfiguration'>Payers - Benefit Configuration</option><option value='PayersMembershipBilling'>Payers -Membership & Billing</option><option value='PayersProviderDataManagement'>Payers-Provider Data Management</option><option value='PayersClaims'>Payers- Claims</option><option value='PayersMedicalManagement'>Payers-Medical Management</option><option value='PayersMembershipBilling'>Payers -Membership & Billing</option><option value='PayersProviderDataManagement'>Payers-Provider Data Management</option><option value='PayersClaims'>Payers- Claims</option><option value='PayersContactCenter'>Payers-Contact Center</option><option value='ProvidersPhysician'>Providers-Physician</option><option value='Providers-Pharmacy'>Providers-Pharmacy</option><option value='Providers-Durable Medical Equipment'>Providers-Durable Medical Equipment</option><option value='ProvidersHospitalandPAS'>Providers -Hospital and PAS</option>"); } else if (val == "F&A") { $("#serviceline").html("<option value='sourcetopay'>source to pay</option><option value='OrdertoCash'>Order to Cash</option><option value='Record to Report'>Record to Report</option><option value='FP&A'>FP&A</option><option value='Payroll Processing'>Payroll Processing</option>"); } else if (val == "Technology") { $("#serviceline").html("<option value='LDO'>LDO</option><option value='Product Support'>Product Support</option><option value='Digital Marketing'>Digital Marketing</option><option value='Content Management'>Content management</option>"); } else if (val == "Banking & Lending") { $("#serviceline").html("<option value='Escrow Services'>Escrow Services</option><option value='Loan Services'>Loan services</option><option value='Data Management Utility'>Data Management Utility</option>"); } else if (val == "P & R") { $("#serviceline").html("<option value='L1 Service Desk'>L1 Service Desk</option><option value='L2 Service Desk'>L2 Service Desk</option><option value='Customer Service'>Customer Service</option>"); } else if (val == "Life Sciences") { $("#serviceline").html("<option value='ClinicalDataManagement'>Clinical Data Management</option><option value='PharmacoVigilance'>Pharmaco-Vigilance</option><option value='MedicalWriting'>Medical Writing</option><option value='Regulatory Affairs'>Regulatory Affairs</option><option value='Bio Statistics'>Bio Statistics</option>"); } else if (val == "IME") { $("#serviceline").html("<option value='Content Management'>Content Management</option><option value='Customer Experience Management'>Customer Experience Management</option>"); } else{$("#serviceline").html("");$("#subservice").html("");} } function change1() { var values = serviceline.options[serviceline.selectedIndex].value; if (values == "Reconciliations") { $("#subservice").html("<option value='InternalReconciliations'>Internal Reconciliations</option><option value='ExternalReconciliations'>External Reconciliations</option><option value='RecOnboarding'>Rec- Onboarding</option>"); } else if (values == "ClientOnboarding") { $("#subservice").html("<option value='OnboardingRequestInitiation'>Onboarding Request Initiation</option><option value='ClientDueDiligence'>Client Due Diligence</option><option value='ContractualLegaSetUp'>Contractual / Legal Set Up</option><option value='ClientAccountSetup'>Client Account Set up</option>"); } else if (values == "PCInsuranceCommercial") { $("#subservice").html("<option value='IllustrationandQuotes'>Illustration and Quotes</option><option value='PolicyAdministration'>Policy Administration</option><option value='MoneyInandRefunds'>Money-In and Refunds</option><option value='MoneyOutTransfers'>Money Out & Transfers</option>"); } else if (values == "LifeInsurancePolicyMaintenance") { $("#subservice").html("<option value='IllustrationandQuotes'>Illustration and Quotes</option><option value='PolicyAdministration'>Policy Administration</option><option value='MoneyInandRefunds'>Money-In and Refunds</option><option value='MoneyOutTransfers'>Money Out & Transfers</option>"); } else if (values == "AnnuitiesBusinessPolicyIssurance") { $("#subservice").html("<option value='ImagingandScanning'>Imaging and Scanning</option><option value='Indexing'>Indexing</option><option value='CashOpsandFunding'>Cash Ops and Funding</option><option value='ContractSetUpandNIGOresolution'>Contract Set Up and NIGO resolution</option><option value='TOAProcess'>TOA Process</option><option value='PolicyIssuance'>Policy Issuance</option>"); } else if (values == "PayersMembershipBilling") { $("#subservice").html("<option value='CaseInstallation/GroupSetup'>Case Installation/Group Set up</option><option value='MemberLevelSetup/Enrollment'>Member Level Set up/Enrollment</option><option value='WelcomeKit'>Welcome Kit</option><option value='Maintenance'>Maintenance</option><option value='Billing/Reconciliation'>Billing/Reconciliation</option>"); } else if (values == "PayersMedicalManagement") { $("#subservice").html("<option value='UtilizationManagement'>Utilization Management</option><option value='CaseManagement'>Case Management</option><option value='Disease Management'>Disease Management</option><option value='ComplianceandAccreditation'>Compliance and Accreditation</option>"); } else if (values == "ProvidersPhysician") { $("#subservice").html("<option value='Pre-Service'>Pre-Service</option><option value='Service'>Service</option><option value='Post Service'>Post Service</option>"); } else if (values == "ProvidersHospitalandPAS") { $("#subservice").html("<option value='Pre-Service'>Pre-Service</option><option value='Service'>Service</option><option value='Post Service'>Post Service</option>"); } else if (values == "OrdertoCash") { $("#subservice").html("<option value='MasterDataManagement'>Master Data Management</option><option value='Order Management'>Order Management</option><option value='InvoicetoCash'>Invoice to Cash</option>"); } else if (values == "sourcetopay") { $("#subservice").html("<option value='Sourcing'>Sourcing</option><option value='SupplierAdministration'>Supplier Administration</option><option value='Goods Receipt'>Goods Receipt</option><option value='InvoiceProcessingandPayments'>Invoice Processing and Payments</option><option value='ControllershipandComplianceActivities'>Controllership and Compliance Activities</option>"); } else if (values == "ClinicalDataManagement") { $("#subservice").html("<option value='SetUp'>Set Up</option><option value='Conduct'>Conduct</option><option value='LPLV to DB Lock'>LPLV to DB Lock</option><option value='Post Lock'>Post Lock</option>"); } else if (values == "PharmacoVigilance") { $("#subservice").html("<option value='Case Management'>Case Management</option><option value='Aggregate Safety Reporting'>Aggregate Safety Reporting</option><option value='Signaldetection'>Signal detection</option><option value='RiskManagement'>Risk Management</option>"); } else if (values == "MedicalWriting") { $("#subservice").html("<option value='PreStudySetUp'>Pre Study Set Up</option><option value='Study Set Up'>Study Set Up</option><option value='Conduct'>Conduct</option><option value='Closure'>Closure</option><option value='PostClosure'>Post Closure</option>"); } else{ $("#subservice").html("");} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> Vertical Name <select id="type" required onchange="change()"> <option value="select">---select---</option> <option value="BFS">BFS</option> <option value="Insurance">Insurance</option> <option value="Healthcare">Health care</option> <option value="F&A">F&A</option> <option value="Technology">Technology</option> <option value="Banking & Lending">Banking & Lending</option> <option value="P & R">P & R</option> <option value="Life Sciences">Life Sciences</option> <option value="IME">IME</option> </select> </td> <td>Service Line <select id="serviceline" onchange="change1()"> <option value=""></option> </select> </td> <td> <select id="subservice" id="subservice" multiple="multiple"> <option value=""></option> </select> </td> </tr> </table> 

Answer 2

只要組合的數量不大，我通常通過呈現一個隱藏的選擇以及所有可能的依賴值以及一個數據屬性來顯示它們所依賴的內容，從而解決此類問題。 然后，您可以使用jquery僅選擇需要客戶端的元素。 像這樣：

HTML：

<select id="type">
    <option value="select">--Select--</option>
    <option value="BFS">BFS</option>
    <option value="Insurance">Insurance</option>
</select>

<select id="serviceline"></select>

<select id="serviceline-data" style="display:none">
    <option data-parent="BFS" value="BFS1">BFS Opt 1</option>
    <option data-parent="BFS" value="BFS2">BFS Opt 2</option>
    <option data-parent="Insurance" value="Ins1">Ins Opt 1</option>
    <option data-parent="Insurance" value="Ins2">Ins Opt 2</option>
</select>

JS

function dependentDropdown(src, data, target){

    var srcVal = $(src).find(":selected").val();        

    var $target = $(target);
    $target.children().empty();  

    var items = $(data).find("[data-parent='" + srcVal + "']");

    if (items.length > 0){
        $target.append("<option value="">--Select--</option>");
        $target.append(items.clone());
    }
}

然后使用它

$(document).ready(function(){
     $("#type").change(function(){
        dependentDropdown(this, "#serviceline-data", "#serviceline")});
});

Answer 3

您可能已經注意到，您的代碼包含很多重復項，我想這將很難維護。 請參閱以下有關如何基於簡單數據結構構建依賴select元素的建議：

 var data = { Level1: { Level1a: ['a', 'b'], Level1b: ['x', 'y'] }, Level1b: { Level2b: ['c', 'd'] } } function setOptions(element, options) { element.html('<option>' + options.join( '</option><option>' ) + '</option>'); } setOptions($('#level1'), Object.keys(data)) updateLevel2() updateLevel3() $('#level1').click(function() { updateLevel2() updateLevel3() }) $('#level2').click(function() { updateLevel3() }) function updateLevel2() { setOptions($('#level2'), Object.keys(data[$('#level1').val()])) } function updateLevel3() { setOptions($('#level3'), data[$('#level1').val()][$('#level2').val()]) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="level1"> <option value=""></option> </select> <select id="level2"> <option value=""></option> </select> <select id="level3" multiple="multiple"> <option value=""></option> </select>