单击下拉列表重定向到另一个页面答案

【问题标题】：redirect to another page clicking on dropdown listing单击下拉列表重定向到另一个页面
【发布时间】：2018-01-12 13:40:21
【问题描述】：

在给定的代码中，我的主要目的是通过根据所选下拉菜单单击按钮来重定向到另一个页面。这里第一个表格用于国家，第二个列表用于根据国家/地区选择的产品。现在我想通过单击按钮重定向到页面作为与值匹配的键。这是它的例子。 https://cibtvisas.com/

HTML 代码,

<form name="form" id="form">
    <div class="row">
                       <div class="col-md-4 col-sm-6">
                          <div class="search-category-container">
                            <label class="styled-select">
      <select name="dep" class="dropdown-product drop-select">
        <option>Select</option>
        <option>Australia</option>
        <option>Canada</option>
        <option>UK</option>
      </select>
      </label>
    </div>
    </div>

     <div class="col-md-7 col-sm-6">
                          <div class="search-category-container">
                            <label class="styled-select">
      <select name="cname" class="dropdown-product drop-select">
        <option>Contact name</option>
      </select>
       </label> 
                          </div>
                        </div>
                        <div class="col-md-1 col-sm-6">
                          <button type="submit" name="clickon"  class="btn btn-search-icon"><i class="ti-search"></i></button>
                        </div>
                      </div>
    </form>

jquery 代码

$(document).ready(function() {

$department = $("select[name='dep']");
$cname = $("select[name='cname']");
$clickbutton = $("select[name='clickon']")

$department.click(function() {

  if ($(this).val() == "Select") 
{
$("select[name='cname'] option").remove();
$("<option>Visa name</option>").appendTo($cname);
}

if ($(this).val() == "Australia") {
$("select[name='cname'] option").remove();
$("<option value='Australia_temporary'>Australia Temporary Graduate Visa (Post..</option>").appendTo($cname);
$("<option value='Australia_skilled'>Australia Skilled Independent Visa (subclass 189)</option>").appendTo($cname);
$("<option value='Australia_srvg'>Australia SRGV Evaluation</option>").appendTo($cname);
$("<option value='australia_family'>Australia Family Immigration</option>").appendTo($cname);
$("<option value='partner_skills'>Partner Skills Evaluation Report</option>").appendTo($cname);
$("<option value='australia_nominated'>Australia Skilled Nominated Visa (subclass 190)</option>").appendTo($cname);
$("<option value='Australia_employer'>Australia Employer Nomination Scheme (ENS)</option>").appendTo($cname);
$("<option value='Australia_subclass'>Australia Subclass 457 Visa</option>").appendTo($cname);
$("<option value='Australia_business'>Australia Business Innovation & Investment..</option>").appendTo($cname);
$("<option value='Australia_student'>Australia Student Dependent Visa</option>").appendTo($cname);
$("<option value='Australia_doctors'>Australia Doctors & Nurses Visa</option>").appendTo($cname);
$("<option value='Australia_immigration'>Australia Immigration Skills Assessment</option>").appendTo($cname);
$("<option value='Australia_talent'>Australia Business Talent..</option>").appendTo($cname);
$("<option value='Contributory_parents'>Contributory Parents Visa</option>").appendTo($cname);
$("<option value='Australia_child'>Australia Child Visa</option>").appendTo($cname);
$("<option value='Australia_graduate'>Australia Temporary Graduate Visa..</option>").appendTo($cname);
$("<option value='Australia_regional'>Australia Skilled Regional (Provisional) Visa ..</option>").appendTo($cname);
$("<option value='Australia_recognised'>Australia Skilled Recognised Graduate ...</option>").appendTo($cname);
$("<option value='Australia_resident'>Australia Resident Return Visa</option>").appendTo($cname);
$("<option value='Australia_evaluation'>Australia Evaluation Report</option>").appendTo($cname);
$("<option value='Australia_partner'>Australia Partner Immigration</option>").appendTo($cname);
$("<option value='DIBP'>DIBP</option>").appendTo($cname);
$("<option value='Partner_skills'>Partner Skills Assessment</option>").appendTo($cname);
$("<option value='Australia_innovation'>Australia Business Innovation & Investment..</option>").appendTo($cname);
$("<option value='Visa_documentation'>Visa Documentation</option>").appendTo($cname);
$("<option value='Australia_parents'>Australia Parents Visa</option>").appendTo($cname);
$("<option value='Australia_ens'>Australia ENS Report</option>").appendTo($cname);
$("<option value='DIBP_evaluation'>DIBP Evaluation Report</option>").appendTo($cname);
$("<option value='Contributory_visa'>Contributory Parents Visa</option>").appendTo($cname);
$("<option value='Australia_investment'>Australia Business Innovation & Investment..</option>").appendTo($cname);
}

if ($(this).val() == "Canada") 
{
$("select[name='cname'] option").remove();
$("<option value='Canada_family'>Canada Family Immigration</option>").appendTo($cname);
$("<option value='Canada_quebec_skilled'>Canada Quebec Skilled Worker Visa</option>").appendTo($cname);
$("<option value='Quebec_evaluation'>Quebec Evaluation Report</option>").appendTo($cname);
$("<option value='CIC_guidance'>CIC Guidance (Post ITA)</option>").appendTo($cname);
$("<option value='Canada_dependent_work'>Canada Dependent Work Permit</option>").appendTo($cname);
$("<option value='Canada_self'>Canada Self Employed Visa</option>").appendTo($cname);
$("<option value='Canada_manitoba'>Canada Manitoba Provincial Nomination Program</option>").appendTo($cname);
$("<option value='Canada_nova'>Canada Nova Scotia Nomination Program</option>").appendTo($cname);
$("<option value='Canada_experience'>Canada Experience Class Evaluation</option>").appendTo($cname);
$("<option value='Canada_quebec_experience'>Canada Quebec Experience Class</option>").appendTo($cname);
$("<option value='Canada_parent'>Canada Parent And Grandparent Super Visa</option>").appendTo($cname);
$("<option value='Canada_self_employed'>Canada Self Employed Visa Evaluation Report</option>").appendTo($cname);
$("<option value='Saskatchewan_nomination'>Saskatchewan Nomination Program Evaluation</option>").appendTo($cname);
$("<option value='Canada_dependent'>Canada Dependent Visa</option>").appendTo($cname);
$("<option value='Atlantic_immigration'>Atlantic Immigration Pilot Program</option>").appendTo($cname);
$("<option value='Canada_federal'>Canada Federal Skilled Worker</option>").appendTo($cname);
$("<option value='Canada_fsw'>Canada FSW Evaluation</option>").appendTo($cname);
$("<option value='Canada_start_up'>Canada Start_up Visa Evaluation</option>").appendTo($cname);
$("<option value='Canada_business_visa'>Canada Business Visa</option>").appendTo($cname);
$("<option value='Canada_post_graduate'>Canada Post Graduate Work Permit</option>").appendTo($cname);
$("<option value='Canada_open_work'>Canada Open Work Permit</option>").appendTo($cname);
$("<option value='Canada_start_up'>Canada Start_up Visa</option>").appendTo($cname);
$("<option value='Canada_nova'>Canada Nova Scotia Nomination Program..</option>").appendTo($cname);
$("<option value='Canada_experience'>Canada Experience Class</option>").appendTo($cname);
$("<option value='Canada_federal'>Canada Federal Trade Worker Class</option>").appendTo($cname);
$("<option value='Canada_Manitoba_pnp'>Canada Manitoba PNP Evaluation</option>").appendTo($cname);
$("<option value='Saskatchewan_nomination'>Saskatchewan Nomination Program</option>").appendTo($cname);
$("<option value='Canada_work'>Canada Work Permit</option>").appendTo($cname);
$("<option value='Canada_federal_trade'>Canada Federal Trade Worker Class Evaluation</option>").appendTo($cname);
$("<option value='Atlantic_immigration_pilot'>Atlantic Immigration Pilot Program</option>").appendTo($cname);
}

if ($(this).val() == "UK") 
{
$("select[name='cname'] option").remove();
$("<option value='UK_dependent'>UK Dependent Visa</option>").appendTo($cname);
$("<option value='UK_tier_dependent'>UK Tier 1 Dependent</option>").appendTo($cname);
$("<option value='HSW_extensions'>UK Tier 1 / HSW Extensions Or FLR</option>").appendTo($cname);
$("<option value='FLRUK_tier'>UK Tier 1 / HSW Extensions Or FLRUK Tier 1 / HSW Extensions Or FLR</option>").appendTo($cname);
$("<option value='UK_student_dependent'>UK Student Dependent Visa</option>").appendTo($cname);
$("<option value='UK_domestic_worker'>UK Domestic Worker Visa</option>").appendTo($cname);
$("<option value='Student_visa_general'>UK Tier 4 Student Visa General</option>").appendTo($cname);
$("<option value='UK_EEA_family'>UK EEA Family Permit</option>").appendTo($cname);
$("<option value='Work_permits'>UK Tier 2 Work Permits</option>").appendTo($cname);
$("<option value='Sole_representative'>UK Sole Representative Visa</option>").appendTo($cname);
$("<option value='Tier_2_dependent_visa'>UK Tier 2 Dependent Visa</option>").appendTo($cname);
$("<option value='Entrepreneur_visa'>UK Tier 1 Entrepreneur Visa</option>").appendTo($cname);
}

});
});


var dictionary = {
                  'Australia_temporary': 'australia-temporary-graduate-visa-(post-study-work-stream).php',
'Australia_skilled': 'Australia-skilled-independent-visa-(subclass-189).php',
'Australia_srvg': 'Australia-srvg-evaluation.php',
'australia_family': 'australia-family-immigration.php',
'partner_skills': 'partner-skills-evaluation-report.php',
'australia_nominated': 'australia-skilled-nominated-visa-(subclass-190).php',
'Australia_employer': 'australia-employer-nomination-scheme-(ens).php',
'Australia_subclass': 'australia-subclass-457-visa.php',
'Australia_business': 'australia-business-innovation-investment-(permanent)-(subclass-888-visa).php',
'Australia_student': 'australia-student-dependent-visa.php',
'Australia_doctors': 'australia-doctors-nurses-visa.php',
'Australia_immigration': 'australia-immigration-skills-assessment.php',
'Australia_talent': 'australia-business-talent-(permanent)-(subclass-132)-visa.php',
'Contributory_parents': 'contributory-parents-visa.php',
'Australia_child': 'australia-child-visa.php',
'Australia_graduate': 'australia-temporary-graduate-visa-(graduate-work-stream).php',
'Australia_regional': 'australia-skilled-regional-(provisional)-visa-(subclass-489).php',
'Australia_recognised': 'australia-skilled-recognised-graduate-(temporary)-visa-(subclass-476).php',
'Australia_resident': 'australia-resident-return-visa.php',
'Australia_evaluation': 'australia-evaluation-report.php',
'Australia_partner': 'australia-partner-immigration.php',
'DIBP': 'dibp.php',
'Partner_skills': 'partner-skills-assessment.php',
'Australia_innovation': 'australia-business-innovation-investment-(provisional)-(subclass-188-visass).php',
'Visa_documentation': 'visa-documentation.php',
'Australia_parents': 'australia-business-innovation-investment-(provisional)-(subclass-188-visas).php',
'Australia_ens': 'australia-ens-report.php',
'DIBP_evaluation': 'dibp-evaluation-report.php',
'Contributory_visa': 'contributory-parents-visas.php',

'Canada_family': 'canada-family-immigration.php',
'Canada_quebec_skilled': 'canada-quebec-skilled-worker-visa.php',
'Quebec_evaluation': 'quebec-evaluation-report.php',
'CIC_guidance': 'cic-guidance-(post-ita).php',
'Canada_dependent_work': 'canada-dependent-work-permit.php',
'Canada_self': 'canada-employed-visa.php',
'Canada_manitoba': 'canada-manitoba-provincial-nomination-program.php',
'Canada_nova': 'canada-nova-scotia-nomination-program.php',
'Canada_experience': 'canada-experience-evaluation.php',
'Canada_quebec_experience': 'canada-quebec-experience.php',
'Canada_parent': 'canada-parent-and-grandparent-visa.php',
'Canada_self_employed': 'canada-employed-visa-evaluation-report.php',
'Saskatchewan_nomination': 'saskatchewan-nomination-program-evaluation.php',
'Canada_dependent': 'canada-dependent-visa.php',
'Atlantic_immigration': 'atlantic-immigration-pilot-program.php',
'Canada_federal': 'canada-federal-skilled-worker.php',
'Canada_fsw': 'canada-fsw-evaluation.php',
'Canada_start_up': 'Canadastart-up.php',
'Canada_business_visa': 'canada-business-visa.php',
'Canada_post_graduate': 'canada-post-graduate-work-permit.php',
'Canada_open_work': 'canada-open-work-permit.php',
'Canada_start_up': 'Canadastart-upvisa.php',
'Canada_nova': 'canada-nova-scotia-nomination-program-evaluation.php',
'Canada_experience': 'canada-experience.php',
'Canada_federal': 'canada-federal-trade-worker.php',
'Canada_Manitoba_pnp': 'canada-manitoba-pnp-evaluation.php',
'Saskatchewan_nomination': 'saskatchewan-nomination-program.php',
'Canada_work': 'canada-work-permit.php',
'Canada_federal_trade': 'canada-federal-trade-worker-evaluation.php',
'Atlantic_immigration_pilot': 'atlantic-immigration-pilot-program.php',


'UK_dependent': 'uk-dependent-visa.php',
'UK_tier_dependent': 'uk-tier-1-dependent.php',
'HSW_extensions': 'uk-tier-1-hsw-extensions-or-flr.php',
'FLRUK_tier': 'uk-tier-5-youth-mobility-scheme.php',
'UK_student_dependent': 'uk-student-dependent-visa.php',
'UK_domestic_worker': 'uk-domestic-worker-visa.php',
'Student_visa_general': 'uk-tier-4-student-visa-general.php',
'UK_EEA_family': 'uk-eea-family-permit.php',
'Work_permits': 'uk-tier-2-work-permits.php',
'Sole_representative': 'uk-sole-representative-visa.php',
'Tier_2_dependent_visa': 'uk-tier-2-dependent-visa.php',
'Entrepreneur_visa': 'uk-tier-1-entrepreneur-visa.php'

};


$('form').submit(function() {
    var newaction = $('[name=cname]').val();
debugger;
    window.location.href = dictionary[newaction];
});

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

您的代码几乎就在那里，但是您首先需要使用change 事件，而不是click，来检测select 元素中的选择更改。其次，您需要停止表单提交才能完成您的window.location.href 分配。试试这个：

$(document).ready(function() {
  $department = $("select[name='dep']");
  $cname = $("select[name='cname']");
  $clickbutton = $("select[name='clickon']")

  $department.change(function() {
    if ($(this).val() == "Select") {
      $("select[name='cname'] option").remove();
      $("<option>Visa name</option>").appendTo($cname);
    }

    if ($(this).val() == "Australia") {
      $("select[name='cname']").empty();
      $("<option value='Australia_temporary'>Australia Temporary Graduate Visa (Post..</option>").appendTo($cname);
      $("<option value='Australia_skilled'>Australia Skilled Independent Visa (subclass 189)</option>").appendTo($cname);
      $("<option value='Australia_srvg'>Australia SRGV Evaluation</option>").appendTo($cname);
      // more options...
    }

    if ($(this).val() == "Canada") {
      $("select[name='cname']").empty();
      $("<option value='Canada_family'>Canada Family Immigration</option>").appendTo($cname);
      $("<option value='Canada_quebec_skilled'>Canada Quebec Skilled Worker Visa</option>").appendTo($cname);
      $("<option value='Quebec_evaluation'>Quebec Evaluation Report</option>").appendTo($cname);
      // more options...
    }

    if ($(this).val() == "UK") {
      $("select[name='cname']").empty();
      $("<option value='UK_dependent'>UK Dependent Visa</option>").appendTo($cname);
      $("<option value='UK_tier_dependent'>UK Tier 1 Dependent</option>").appendTo($cname);
      $("<option value='HSW_extensions'>UK Tier 1 / HSW Extensions Or FLR</option>").appendTo($cname);
      // more options...
    }

  });
});


var dictionary = {
  'Australia_temporary': 'australia-temporary-graduate-visa-(post-study-work-stream).php',
  'Australia_skilled': 'Australia-skilled-independent-visa-(subclass-189).php',
  'Australia_srvg': 'Australia-srvg-evaluation.php',
  'australia_family': 'australia-family-immigration.php',
   // more options...

  'Canada_family': 'canada-family-immigration.php',
  'Canada_quebec_skilled': 'canada-quebec-skilled-worker-visa.php',
  'Quebec_evaluation': 'quebec-evaluation-report.php',
   // more options...

  'UK_dependent': 'uk-dependent-visa.php',
  'UK_tier_dependent': 'uk-tier-1-dependent.php',
  'HSW_extensions': 'uk-tier-1-hsw-extensions-or-flr.php',
  // more options...
};

$('form').submit(function(e) {
  e.preventDefault();
  var newaction = $('[name=cname]').val();
  debugger;
  //window.location.href = dictionary[newaction]dictionary[newaction];
  console.log(dictionary[newaction]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" id="form">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="search-category-container">
        <label class="styled-select">
          <select name="dep" class="dropdown-product drop-select">
            <option>Select</option>
            <option>Australia</option>
            <option>Canada</option>
            <option>UK</option>
          </select>
          </label>
      </div>
    </div>
    <div class="col-md-7 col-sm-6">
      <div class="search-category-container">
        <label class="styled-select">
          <select name="cname" class="dropdown-product drop-select">
            <option>Contact name</option>
          </select>
           </label>
      </div>
    </div>
    <div class="col-md-1 col-sm-6">
      <button type="submit" name="clickon" class="btn btn-search-icon"><i class="ti-search"></i></button>
    </div>
  </div>
</form>

我还建议您查看 AJAX 以检索 option 元素的数据，因为您当前的逻辑将 JS 与您管理的数据紧密联系在一起，而且它增加了很多客户端臃肿而且不是很干燥。

【讨论】：