How can I disable or select a specific value in my selectbox with jquery?

Question

I have an input field:

<input id="count" name="count" min="1" value="1" type="number"  />

and a select box:

<select id="select">
    <option>nothing selected</option>
    <option data-number="4">four (4)</option>
    <option data-number="5">five (5)</option>
    <option data-number="6">six (6)</option>
</select>

I want to achieve the following:

If the input value of #count is higher than the data-number of #select then disable this option (for example: If input value of #count is higher than "5"then disable the option with data-number="5". And I would also like that automatically the option of #select is selected in which the value of #count fits best (for example: for input value "3" automatically select the opiton with data-number "4", for input value "4" select opiton with data-number "4", for input value "5" select opiton with data-number "5")

This is how I tried to solve it, but it doesn't work:

$(function(){
            $('input').change(function(){
                if($('#count').val() > $('#select').data(number)) {
                    $('#select option').attr('disabled', true);
                }  
                else {
                    $('#select option').attr('disabled', false);
                } 
                if ($('#select').data(number) == Math.min($('#select').data(number) - $('#count').val()){
                   $('#select option').attr('selected', true);  
                }
            }); 
}

Here is the fiddle: https://jsfiddle.net/dh1ak18t/

Answer 1

Give this a shot:

$('input').change(function () {
    var that = parseInt($(this).val(), 10);
    $('#select option:gt(0)').each(function () {
        $(this).prop('disabled', ($(this).data('number') < that)).prop('selected', ($(this).data('number') >= that && $(this).prev().data('number') < that));
    })
    if (that <= $('#select option:eq(1)').data('number')) $('#select option:eq(1)').prop('selected', true);
}).change()

jsFiddle example

Answer 2

I hope the following code can help you.

 $(function() {

         $("#count").change(function() {

                    var countValue = parseInt($("#count").val());


                    $("#select option").each(function() {

                        var numberOption = parseInt($(this).attr("data-number"));
                        if (!isNaN(numberOption) && !isNaN(countValue) && countValue > numberOption)
                            $(this).hide();
                        else if (!isNaN(numberOption) && !isNaN(countValue))
                        {
                            $(this).show();


                        }

                        if (!isNaN(numberOption) && !isNaN(countValue) && countValue == numberOption)
                            $(this).attr("selected",true);

                    });


                });
            });

Answer 3

check the below code and link

$('input').change(function(){
        if($('#count').val() > $('#select option:last-child()').data("number")) {
            $('#select option[data-number="6"]').attr('disabled', 'disabled');
        }  
        else {
            $('#select option[data-number="6"]').removeAttr('disabled');
            $('#select option[data-number="'+$('#count').val()+'"]').attr('selected', 'selected');
        } 
    });