下拉菜单的选定选项值未获取

Question

我有一个简单的两个下拉表单，需要根据下拉列表中的给定值进行重定向。

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

 <form id="CustomSearch"> <select id="Location"> <option value='northeast'>North East</option> <option value='west'>West</option> <option value='midwest'>Mid West</option> <option value='south'>South</option> </select> <select id="Style"> <option value='industrial'>Industrial</option> <option value='farmhouse'>Farmhouse</option> <option value='contemporary'>Contemporary</option> <option value='beach+style'>Beach Style</option> <option value='traditional'>Tradtional</option> </select> <button id="DropSearch"> <i class="fa fa-search" aria-hidden="true"></i></button> </form> 

出于某种原因，重定向仅在下拉菜单的第一个选项（或在加载浏览器窗口时选择的选项）上进行选择……关于这种情况的任何想法？ 您可以访问http://showroomworldwide.com/上的示例网址。

Answer 1

您无需测试所选的选项。 只是获得选择的价值。 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"> <option value='northeast'>North East</option> <option value='west'>West</option> <option value='midwest'>Mid West</option> <option value='south'>South</option> </select> <select id="Style"> <option value='industrial'>Industrial</option> <option value='farmhouse'>Farmhouse</option> <option value='contemporary'>Contemporary</option> <option value='beach+style'>Beach Style</option> <option value='traditional'>Tradtional</option> </select> <button id="DropSearch"> <i class="fa fa-search" aria-hidden="true"></i></button> </form> 

Answer 2

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

准备好在文档开始时立即执行这些行。 因此，它们的值将等于页面加载时的值。 它们不会根据点击逻辑进行重新评估。 如果要按点击时的值来获取它们，请将它们移入点击逻辑。