Question

预先感谢您对此的帮助！：）

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

但我遇到的困难是我被迫使用一个不允许我修改HTML的网站建设者。但它确实让我在页面中添加了javascript代码。所以解决方案需要完全是javascript / jQuery。

所以我需要使用javascript或jQuery来创建url重定向，基于下拉列表中的选定选项（它没有选择ID）。看看下面的代码。

以下是下拉列表的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(); 

 }

Answer 2

由于你无法编辑html解决方案之一，你的答案可以 $('.elButtonMain).click(function(){})

Answer 3

纯Javascript中的一个简单示例：

<select id="sex">
<option value="val1">variant one</option>
<option value="val2">variant two</option>
<option value="val3">variant three</option>
</select>

<button  type="submit" onclick="navigate()">
Press me
</button>

function navigate(){

var option = document.getElementById("sex");
if(option.value =="val1"){
window.open("http://stackoverflow.com/");
}else if(option.value =="val2"){
window.open("https://youtube.com/");
}else{
window.open("http://www.bing.com/");
}}

https://jsfiddle.net/mxytL032/

Answer 4

您需要停止将事件传播到子元素<a>

$("#tmp_button-92288-160").click(function(e) { e.stopPropagation(); });

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

4 个答案: