下拉選擇的選項值沒有被拾取jQuery

我有一個簡單的兩個下拉表單，需要根據給定值下拉重定向。下拉選擇的選項值沒有被拾取jQuery

jQuery(document).ready(function(){ 
 

 
\t var location = jQuery('#Location option:selected').val(); 
 
\t var style = jQuery('#Style option:selected').val(); 
 
\t 
 
    \t jQuery('#DropSearch').click(function (e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
    \t window.location.href = 'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + location + '&stype=gd_place&s=' + style; 
 
\t }); 
 
});

<form id="CustomSearch"> 
 
<select id="Location"> 
 
\t \t <option value='northeast'>North East</option> 
 
\t \t <option value='west'>West</option> 
 
\t \t <option value='midwest'>Mid West</option> 
 
\t \t <option value='south'>South</option> 
 
\t </select> 
 

 
\t <select id="Style"> 
 
\t \t <option value='industrial'>Industrial</option> 
 
\t \t <option value='farmhouse'>Farmhouse</option> 
 
\t \t <option value='contemporary'>Contemporary</option> 
 
\t \t <option value='beach+style'>Beach Style</option> 
 
\t \t <option value='traditional'>Tradtional</option> 
 
\t </select> 
 

 
\t <button id="DropSearch"> 
 
<i class="fa fa-search" aria-hidden="true"></i></button> 
 
</form>

出於某種原因，重定向僅在下拉菜單的第一選擇拾取（或所選選項的瀏覽器窗口中加載時）......任何想法，爲什麼這是怎麼回事？ http://showroomworldwide.com/您可以訪問該工作示例的網址。

來源

2016-12-05 Adrian Reyes

您無需測試所選選項。只需獲取選擇的值。 val()方法將返回字段的當前值，該值將被選中。

但是，當按鈕被點擊時，你必須得到這些值，而不是之前。

此外，由於您未使用提交按鈕，因此沒有需要取消的本機行爲，因此您可以刪除e.preventDefault()和e.stopPropagation()。

$(function(){ 
 

 
    $('#DropSearch').click(function (e){ 
 
    
 
    // Now that the button has been clicked, just get the 
 
    // value of the elements. No need to get the selected option 
 
    var location = jQuery('#Location').val(); 
 
    var style = jQuery('#Style').val(); 
 
    
 
    // Test to see if the right choices were stored: 
 
    console.log(location, style); 
 
    
 
    window.location.href = 
 
     'http://showroomworldwide.com/?geodir_search=1&stype=gd_place&s=' + 
 
     location + '&stype=gd_place&s=' + style; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="CustomSearch"> 
 
<select id="Location"> 
 
\t \t <option value='northeast'>North East</option> 
 
\t \t <option value='west'>West</option> 
 
\t \t <option value='midwest'>Mid West</option> 
 
\t \t <option value='south'>South</option> 
 
\t </select> 
 

 
\t <select id="Style"> 
 
\t \t <option value='industrial'>Industrial</option> 
 
\t \t <option value='farmhouse'>Farmhouse</option> 
 
\t \t <option value='contemporary'>Contemporary</option> 
 
\t \t <option value='beach+style'>Beach Style</option> 
 
\t \t <option value='traditional'>Tradtional</option> 
 
\t </select> 
 

 
\t <button id="DropSearch"> 
 
<i class="fa fa-search" aria-hidden="true"></i></button> 
 
</form>

來源

2016-12-06 00:00:22

var location = jQuery('#Location option:selected').val(); 
var style = jQuery('#Style option:selected').val();

你在你的文件準備開始立即做這些線路。因爲這樣他們的價值將是他們在頁面加載的任何東西。它們不會根據點擊邏輯重新評估。如果您想在點擊時獲取這些值，請將它們移動到您的點擊邏輯中。

來源

2016-12-06 00:01:03 Taplar

下拉選擇的選項值沒有被拾取jQuery

回答

相關問題