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

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/您可以访问该工作示例的URL。

Answer 1

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

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