如何根据下拉选择显示值

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>