javascript - 下拉列表的选定选项值未被拾取 jQuery

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

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

您在准备好文档的开头立即执行这些行。因此，它们的值将是它们在页面加载时的值。它们不会根据点击逻辑重新评估。如果您想获取点击时的值，请将它们移到您的点击逻辑中。