Поиск ближайшего совпадающего значения с помощью jQuery или javascript

рассмотрим разметку, такую как 

<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. Можно ли нацелить тег option, чей value атрибут ближе всего к 7, который в этом случае будет <option value="8">?

Я в курсе ^ что означает, начиная с $ что означает окончание и надеялся, если есть что-то вроде этого, чтобы найти ближайший матч для данного значения.

8
javascript jquery option

6 ответов

Я пойду так:

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 );
4

Как насчет рекурсии? Он найдет ближайшее значение:

JS-BIN Demo

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
}
3

да просто вычитайте свое значение (7) со значениями опций(используйте каждую функцию)...значение с минимальным положительным результатом будет вашим целевым вариантом. Надеюсь, вы добьетесь желаемого результата.

1

самый простой способ, возможно, старый добрый линейный поиск (вы можете сделать двоичный, но это сложнее, чем обычно):

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);
1
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;
}
1

Если вы можете использовать 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 у вас есть все значения, отсортированные по тому, насколько они близки к вашему значению. Подпрограмма возвращает ближайший больше или меньше и не требует сортировки параметров.

1