javascript - 选择距离半径搜索 javascript 的选项

Question

嗨，我正在尝试添加一个选项下拉列表，可以更改英里半径，例如:25 英里、50 英里、100 英里，并将更新所选半径内的位置。这就是什么

 var newOptions = {
  "Option 1": 1200,
   "Option 2": 1400,
   "Option 3": 160934
  };

  var $el = $("#selectId");
   $el.empty(); // remove old options
   $.each(newOptions, function(key,value) {
   $el.append($("<option></option>").attr("value", value).text(key));
   });




    $('#selectId').change(function(){
      filterLocationsWithinSetDistance();
     });


    var withinDistanceSetting =$("#selectId option").val();; //meters


       function filterLocationsWithinSetDistance {
        if (val.distance <=  withinDistanceSetting ) { //html output 
           of customers in this range }}

我需要它来更新输出函数(filterLocationsWithinSetDistance)希望这可以实现，因为如果您需要更多信息，请告诉我。谢谢

Answer 1

当用户更改下拉列表并且您正在进行过滤时，您需要从下拉列表中获取值。您的代码在页面加载时获取它。

并且您需要获取下拉列表本身的值。 $("#selectId option").val() 返回第一个选项的值，而不是用户选择的选项。

var newOptions = {
  "Option 1": 1200,
  "Option 2": 1400,
  "Option 3": 160934
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
  $el.append($("<option></option>").attr("value", value).text(key));
});

$('#selectId').change(function() {
  filterLocationsWithinSetDistance();
});

function filterLocationsWithinSetDistance() {
    var withinDistanceSetting = $("#selectId").val();
    console.log("Distance being filtered = " + withinDistanceSetting);
    var values = []; // get elements we're processing
    $.each(values, function(i, val) {
        if (val.distance <=  withinDistanceSetting ) { 
            // code that processes this element
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectId"></select>