Enable/disable button depending on whether an input in a text box is in a select box

Question

I have nearly finished writing this code: http://jsfiddle.net/2Jkk9/11/

but I can't figure out how to search the select box for the value in my text box and enable/disabled the button accordingly.

That's probably enough explanation.. the code explains all...

Thank you :).

EDIT Here's my original code from jsfiddle:

<select id="myselect">
    <option>apple</option>
    <option>banana</option>
    <option>pear</option>
</select>
<br><br>
<input id="filter" type="text"/>

and

$(function() {
    $('#filter').keyup(function() {
         // if select box contains input then
         //   $('#mybtn').attr(disabled, 'disabled');
         //}
         //else {
         //   $('#mybtn').removeAttr('disabled');
         //}
    });
});

Answer 1

This should do what you want by filtering the options for ones matching the text and checking the length:

$('#filter').keyup(function() {
    var text = $(this).val();
    if ($('#myselect option').filter(function() {
        return $(this).text() === text;
    }).length) {
        $('#mybtn').attr('disabled', 'disabled');
    }
    else {
        $('#mybtn').removeAttr('disabled');
    }
});

http://jsfiddle.net/infernalbadger/2Jkk9/16/

Answer 2

Use each() to loop through to traverse your list and get value by .val()

check modified code.

(function() {
        $('#filter').keyup(function() {
            $('#myselect option').each(function(){
            if($(this).val() == $('#filter').val())
            {
                $('#mybtn').attr('disabled', 'disabled');
alert('hello');

            }
                else
                {
                     $('#mybtn').removeAttr('disabled');
                }


            });
             // if select box contains input then
             //   $('#mybtn').attr(disabled, 'disabled');
             //}
             //else {
             //   $('#mybtn').removeAttr('disabled');
             //}
        });

Answer 3

$(function() {
    $('#filter').keyup(function() {
        if($("#filter").val().split($("#myselect").val()).length > 1) {
            $('#mybtn').removeAttr('disabled');
        }
        else {
            $('#mybtn').attr('disabled', 'disabled');
        }
    });
});

this works if the filter contains the selected value, not only when the same.

Answer 4

What about: give your options a value like:

<select>
  <option value="1"></option>
</select>

    $('#myselect').change(function () {
        if ($(this).val() == "1") {
            //do this
        } else { 
        //do this
        }

    });