如何根据下拉选择显示值

Question

here actually 3 drop downs is there when ever i select the first dropdown option according to that the values are auto populate in 2nd drop down...in 2nd drop down if we select any option according to that it will autopopulate in 3rd drop down..actually here everything populate correctly..but one issue is there.

suppose in 1st drop down i select bfs according to that it will generate in 2nd drop down..then again if i select the 'select option' in 1st drop down the previous values of bfs is still there in 2nd drop down.for 'select option' there is no sub-branches..then it will show empty in 2nd dropdown...but in my code its showing like this....can any one help me regarding this..

I am new to ask questions..if anything goes wrong sorry for that.thank you

 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

adding else{$("#serviceline").html("");$("#subservice").html("");} end of the change() function.Is the first 1st dropdown is "select" .other two dropdown option's are clear

 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

As long as the number of combinations is not massive I usually solve this type of problem by rendering a hidden select with all the possible dependent values together with a data attribute to show what they depend on. Then you can use jquery to select just the elements you need client side. Something like this:

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());
    }
}

And then to use it

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

Answer 3

You probably noticed that your code contains a lot of duplication and i imagine it will be quite hard to maintain. Please see the suggestion below on how to build your dependent select elements based on a simple data structure:

 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>