下拉选择的选项值没有被拾取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

回答

相关问题