JSFiddle - React, Tailwind, and code Playground

by Udit Bhardwaj

HTML

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

JavaScript

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())
            }

            console.log('adsasda')

        })
    }, 500)
})

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