javascript - 如何在不使用 Select ID 的情况下创建基于下拉选择的 jQuery URL 重定向？

Question

预先感谢您对此的帮助! :)

当访问者单击提交按钮时，我需要根据他们在下拉列表中选择的选项将他们重定向到不同的网址。

但我遇到的困难是我被迫使用不允许我修改 html 的网站构建器。但它确实允许我向页面添加 JavaScript 代码。因此解决方案只能是 javascript/jQuery。

所以我需要使用 javascript 或 jQuery 根据下拉列表中选定的选项(没有选择 ID)创建 url 重定向。看看下面的代码。

这是下拉列表的 HTML:

<div class="de elInputWrapper elSelectFormBox de-editable de-input-block elAlign_center elMargin0" id="tmp_select_input-89382" data-de-type="select-input" data-de-editing="false" data-title="select input form" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" type="custom_type" style="margin-top: 10px; outline: none; cursor: pointer;">
<label class="elInputLabel">

<select name="custom_type" class="elInput elSelectInput elInput100 elAlign_left elInputMid elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight required0 elInput-Select1" data-type="extra" data-custom-type="Dropdown">
<option value="I want to...">I want to...</option>
<option value="Refinance">Refinance</option>
<option value="Purchase a home I found">Purchase a home I found</option>
<option value="Get pre-approved for a mortgage">Get pre-approved for a mortgage</option>

</select>
</label>
</div>

以下是该按钮的 HTML:

我可以更改按钮上的 href。

<div class="de elBTN elMargin0 elAlign_left de-editable" id="tmp_button-92288-160" data-de-type="button" data-de-editing="false" data-title="button" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer; display: block; font-family: Lato, Helvetica, sans-serif !important;" data-google-font="Lato">
<a href="#" class="elButton elButtonSize1 elButtonColor1 elButtonFluid elButtonPadding2 elButtonRounded elButtonNoShadow" style="color: rgb(255, 255, 255); background-color: rgb(121, 172, 50); font-size: 23px;">
<span class="elButtonMain">Let's Go!</span>
<span class="elButtonSub"></span>
</a>
</div>

这是我当前尝试使用的 jQuery 代码:

<script src=' https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js'‌>
console.log('hey-OutsideClickFunction');
/*Redirect based on Dropdown selection*/
$("#tmp_button-92288-160").click(function(){ 
console.log('hey-InsideClickFunction');
if($('select[name=custom_type]').val() == 'Refinance')
{
window.location ='http://bing.com';
}
if($('select[name=custom_type]').val() == 'Purchase a home I found')
{
window.location ="http://google.com";
}    
if($('select[name=custom_type]').val() == 'Get pre-approved for a mortgage')
{
window.location ="http://yahoo.com";
}      
document.getElementById("tmp_select_input-89382").click(); 
})
</script>

其他 jQuery 尝试

我还尝试将 $("#tmp_select_input-89382").attr("action","yahoo.com"); 替换为 $(location).attr('href ', 'yahoo.com'); 并使用 window.location.href = "http://yahoo.com"; 并使用 window.location = "http://yahoo.com";

有了所有这些，当我单击按钮时，页面就会重新加载。

我尝试使用的 JavaScript 代码

<script>
document.getElementById("#tmp_button-92288-160").addEventListener("click",‌ function(){
var option = document.getElementsByTagName("select")[0];
if(option.value =="Refinance"){
window.open("http://stackoverflow.com/");}
else if(option.value =="Purchase a home I found"){
window.open("https://youtube.com/");}
else{window.open("http://www.bing.com/");
}}
</script>

但是当我单击按钮时，页面就会重新加载。

Answer 1

使用window.location方法

 $("#tmp_button-92288-160").click(function() {

  if($('select[name=custom_type]').val() == 'Refinance')
  {
   window.location ='http://bing.com'
  }
  if($('select[name=custom_type]').val() == 'Purchase a home I found')
  {
   window.location ="http://google.com";
  }    
  if($('select[name=custom_type]').val() == 'Get pre-approved for a       mortgage')
  {
   window.location ="http://yahoo.com";
  }      
   document.getElementById("tmp_select_input-89382").click(); 

 }