javascript - 使用 jQuery 或 javascript 查找最接近的匹配值

Question

考虑一个标记，例如

<select id="blah">
  <option value="3">Some text</option>
  <option value="4">Some text</option>
  <option value="8">Some text</option> // <---- target this tag based on value 7
  <option value="19">Some text</option>
</select>

假设我有一个值，比如 7。是否可以定位value属性最接近 7 的选项标签，在这种情况下，它是 7<option value="8">吗？

我知道^哪个意味着开始，$哪个意味着结束，并且希望是否有类似的东西可以找到与给定值最接近的匹配项。

Answer 1

我会这样：

http://jsfiddle.net/GNNHy/

var $tmpOption = $('<option value="7">Some text 7</option>');
$("#blah").append($tmpOption);
var my_options = $("#blah option");
my_options.sort(function(a,b) {
    if (parseInt(a.value,10) > parseInt(b.value,10)) return 1;
    else if (parseInt(a.value,10) < parseInt(b.value,10)) return -1;
    else return 0
})

$("#blah").empty().append( my_options );

Answer 2

递归怎么样？它将找到最接近的值：

JS-BIN 演示

function getClosest(val, ddl, increment){
  if(ddl.find('option[value="'+val+'"]').length){
      return val;
  }
  else
    try{
      if(increment)
    return getClosest(++val, ddl, increment);
      else
        return getClosest(--val, ddl, increment);
    }
  catch(err){
    return -1;
  }
}

function findClosest(val, ddl){
   var larger = getClosest(val, ddl, true);
   var smaller = getClosest(val, ddl, false);
  if(larger == smaller == -1)
    return -1;
  else if (larger == -1)
    return smaller;
  else if (smaller == -1 )
    return larger;

  if(larger - val > val - smaller)
    return smaller;
  else
    return larger
}    

Answer 3

是的，只需用选项值（使用每个函数）减去您的值（7）......具有最小积极结果的值将是您的目标选项。我希望你会得到想要的结果。

Answer 4

最简单的方法可能是好的旧线性搜索（你可以做二进制，但它比平时更棘手）：

var target;
var $options;

var best=Infinity;
var bestAt;

$options.each(function(){
  var error = this.value - target;
  error = error>0 ? error : -error;
  if(error<=best){
    best=error;
    bestAt=this;
  }
})

//return $(bestAt);

Answer 5

如果你可以使用 jquery，我会做类似的事情

$(function () {
        // comes from somewhere
        var val = 7;

        var sortByDifference = $("#blah option").sort(function (opt1, opt2) {
            return Math.abs(parseInt($(opt1).val()) - val) - Math.abs(parseInt($(opt2).val()) - val);
        });

        alert($(sortByDifference[0]).val());
    });

在 sortByDifference 中，所有值都按照它们与您的值的接近程度进行排序。该例程返回最接近的更大或更小，并且不需要对选项进行排序。

Answer 6

function findClosest(num){
    var select = document.getElementById('blah');
    var options = select.options;
    var dif = Infinity;
    var index;
    for(var i = 0; i < options.length; i++){
        var newdif = Math.abs(parseInt(options[i].value) - num);
        if(newdif < dif){
             dif = newdif;
             index = i;
        }
    }
    select.selectedIndex = index;
}