选择最接近的数字选项

Question

我必须选择最接近输入数据宽度的选项

<input type="number" class="wHeight" value="" placeholder="metros" />
<select name="calcproduct" id="calcproduct">
    <option value="0" selected="selected" class="none">-</option>                        
    <option value="3,01" data-width="5.20" data-height="0.58">Rolo 5.20 x 0.58</option>
    <option value="3,10" data-width="5.40" data-height="0.58">Rolo 5.40 x 0.58</option>     
</select>

我试着用最接近的函数，但是我不明白它的用法。

$('#calcform input').keyup(function(){
     var wHeight = $(this).val().replace(',','.');
     $('#calcproduct option').closest(wHeight).attr('selected');
});

Answer 1

试试这个:

 $('input[type="number"]').keyup(function(){
      var wHeight = $(this).val().replace(',','.');
      $('#calcproduct option').filter(function(index){
          return $(this).data('height') == wHeight
      }).attr('selected', 'true');
 });

演示:

http://jsfiddle.net/txocwnwj/

Answer 2

这是我的看法(虽然过滤可能是一个更好的选择)

$(function() {
  $('#calcform input').keyup(function() {
    var wHeight = $(this).val();
    $('#calcproduct option').each(function(idx, opt) {
      var optionValue = $(opt).val();
      
      if (wHeight.replace('.',',') === optionValue) {
        $('#calcproduct option[value="'+optionValue+'"]').attr('selected', 'selected');
        return;
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calcform">
  <input type="number" class="wHeight" value="" placeholder="metros" />
  
  <select name="calcproduct" id="calcproduct">
    <option value="0" selected="selected" class="none">-</option>
    <option value="3,01" data-width="5.20" data-height="0.58">Rolo 5.20 x 0.58</option>
    <option value="3,10" data-width="5.40" data-height="0.58">Rolo 5.40 x 0.58</option>
  </select>
</form>

Answer 3

试试这个

• 通过提供各种输入，如1、5、6、7、10来键入输入。
• 它将在下拉菜单中选择最接近的选项。

JsFiddle: https://jsfiddle.net/b0bu7w87/4/

Html

<input type="number" class="wHeight" value="" placeholder="metros" />
                <select name="calcproduct" id="calcproduct">
                    <option value="0" selected="selected" class="none">-</option>                        
                    <option value="3,01" data-width="5.20" data-height="0.58">Rolo 5.20 x 0.58</option>
                    <option value="3,10" data-width="5.40" data-height="0.58">Rolo 5.40 x 0.58</option>   
                    <option value="3,10" data-width="6.40" data-height="0.58">Rolo 6.40 x 0.58</option>
                       <option value="3,10" data-width="7.40" data-height="0.58">Rolo 7.40 x 0.58</option> 
                </select>

Jquery

查找最近的号码助手

function closest (num, arr) {
                var curr = arr[0];
                var diff = Math.abs (num - curr);
                for (var val = 0; val < arr.length; val++) {
                    var newdiff = Math.abs (num - arr[val]);
                    if (newdiff < diff) {
                        diff = newdiff;
                        curr = arr[val];
                    }
                }
                return curr;
            }

选择查询

 $('input').keyup(function(){ 
     // collecting option as array
    $("#calcproduct option[value!='0']").each( function() {
       var val = parseFloat($(this).data("width"));       
       arr.push ( val );       
    });
     // find closest number index of the array
     var number = parseFloat($("input").val());
    var closestNumber = $.inArray(closest (number, arr),arr)+1;
     // set the closest number
    $("#calcproduct option:eq("+closestNumber+")").attr("selected","selected");
 });