Question

这里实际上有3个下降，当我选择第一个下拉选项时根据值在第二个下拉中自动填充...在第二个下拉如果我们选择任何选项根据它将在第三个自动填充下拉..实际上这里所有东西都正确填充..但是有一个问题就在那里。

假设在第一次下拉中我根据它将在第二次下拉中生成选择bfs ..然后再次选择＆＃39;选择选项＆＃39;在第一次下拉中，之前的bfs值仍然存在于第二次下拉中。选择选项＆＃39;没有子分支。然后它会在第二个下拉列表中显示为空...但在我的代码中它显示为这样......可以任何人帮我这个...

我是新问的问题。如果出现任何问题，那就不好意思了。谢谢你

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

添加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

您可能已经注意到您的代码包含大量重复内容，而且我认为维护起来非常困难。请参阅以下有关如何基于简单数据结构构建依赖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>

import matplotlib.pyplot as plt

import pandas as pd
from statsmodels.graphics.mosaicplot import mosaic

df = pd.DataFrame({'size' : ['small', 'large', 'large'],
                   'length' : ['long', 'short', 'long']})

print(df)  # note that the 'short'-'small' combination is missing

fig = plt.figure()
ax = fig.add_subplot(111)
mosaic(df, ax=ax)

如何根据下拉选择显示值

3 个答案: