Question

这里在给定的代码中，我的主要目的是通过根据所选的下拉列表单击按钮来重定向到另一个页面。这里的第一种形式是国家，第二种是根据国家选择的产品。现在，我想通过单击按钮重定向到页面，作为与值匹配的键。这是它的例子。 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 code

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

重定向到另一个页面，点击下拉列表

1 个答案: