Как создать переадресацию URL-адреса jQuery на основе выбора выпадающего меню без использования идентификатора?

Question

Заранее благодарим за помощь! :)

Мне нужно перенаправить посетителей на разные URL-адреса, когда они нажимают кнопку «Отправить», на основе опции, которую они выбирают в выпадающем меню.

Но сложность, которую я испытываю, заключается в том, что я вынужден использовать создатель веб-сайта, который не позволяет мне изменять html. Но это позволяет мне добавить код javascript на страницу. Таким образом, решение должно быть исключительно javascript/jQuery.

Поэтому мне нужно использовать javascript или jQuery для создания перенаправления 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(); 

} 

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