Question

<form>

    <select id="ammount">
        <option value="">- Select -</option>
        <option class="100" value="0"></option>
        <option class="200" value="5,01"></option>
        <option class="300" value="10,01"></option>
    </select>

    <input class="height" id="height" name="height" value="">

</form>

<script type="text/javascript">
    $(document).ready( function () {

        $('form').on('change', '#height', function(){
            var height  = "3,00";

            // HERE I NEED TO GRAB THE RIGHT OPTION CLASS FROM SELECT OPTIONS
        });
    });
</script>

我的问题是如何找到合适的选项并获取课程名称？规则是它应该选择小于高度值（3,00）的选项行和大于高度值（3,00）的第一个下一个选项行。

因此，在这种情况下，它将是<option class="100" value="0"></option>

但如果高度为5,55，则右侧选项行为<option class="200" value="5,01"></option>，10,01为相同。

但是，对于height =“10,01”或更多，右侧选项行将为<option class="300" value="10,01"></option>

我在想，找到第一个更大的值（5,01）和减1行是正确的方法，但我不知道该怎么做。

请记住，高度可以是任何值（它来自用户输入的输入框），并且动态地从db中提取选项。

Answer 1

这应该可以解决问题：

$(document).ready( function () {

     $('form').on('change', '#height', function(){ 

        var height  = "3,00";

        var height_num = parseFloat(height.replace(',','.'));
        var selected_item_value;
        var heights = [];
        $('#ammount option').each(function(i, item){
            heights.push(item);
        });
        $(heights.reverse()).each(function(i, item){
            if (parseFloat($(item).val().replace(',','.')) < height_num) {
                 alert($(item).val())
                 selected_item_value = $(item).val();
                 return false;
            }
        });
         $('#ammount').val(selected_item_value);
    });
});

Answer 2

<form>
<select id="amount">
    <option value="">- Select -</option>
    <option class="100" value="0">0</option>
    <option class="200" value="5,01">5,01</option>
    <option class="300" value="10,01">10,01</option>
</select>
<input class="height" id="height" name="height" value="55">
</form>

<强>脚本

var t;

$('#height').focus(function () {

var that = $(this)

t = setInterval(function () {

    var height = parseFloat(that.val().replace(',', '.'))


    $('#amount').children('option').each(function () {

        var compareTo = parseFloat($(this).val().replace(',', '.'))

        var compareToNext = 0

        if ($(this).next().length > 0) 
          compareToNext =parseFloat($(this).next().val().replace(',', '.'))

        if (compareTo < height && height < compareToNext && !isNaN(height)) {
            $('#amount').val($(this).val())

        } 

        else if (compareTo < height && $(this).is(':last-child') && !isNaN(height)) {
            $('#amount').val($(this).val())
        } 

        else if (isNaN(height)) {
            $('#amount').val($('#amount').children('option:first').val())
        }



    }) //end of each
}, 500) //end of setInterval
})  //end of focus

$('#height').blur(function () {
    window.clearInterval(t)
})

DEMO

如何根据变量值获取选项类值

2 个答案: