如何根据下拉选择显示值

how to display the values according to the dropdown selection

本文关键字：选择 显示 何根      更新时间：2023-09-26

这里实际上有3个下拉菜单，当我选择第一个下拉选项时，根据值是自动填充在第二个下拉菜单…在第二个下拉列表中，如果我们选择任何选项，它会在第三个下拉列表中自动填充，实际上这里所有内容都正确填充，但有一个问题。

假设在第一个下拉菜单中我选择了BFS，根据它将在第二个下拉菜单中生成，然后如果我在第一个下拉菜单中选择"选择选项"，那么BFS的先前值仍然存在于第二个下拉菜单中。对于"select option"，没有子分支。然后在第二个下拉菜单中显示为空…但在我的代码中，它显示如下....关于这件事，谁能帮我一下?

我是第一次问问题，如果出了什么问题，我很抱歉。谢谢你 

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>

添加else{$("#serviceline").html("");$("#subservice").html("");} end的change()功能。是第一个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>

只要组合的数量不是很大，我通常通过呈现包含所有可能的依赖值的隐藏选择以及显示它们所依赖的数据属性来解决这类问题。然后可以使用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")});
});

您可能注意到您的代码包含大量重复，我想这将很难维护。请参阅下面关于如何基于简单的数据结构构建依赖的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>

相关文章：