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

选择最近的数字选项

3 个答案:

HTML

Jquery的