jquery - show only option value from dropdown menu based on input value

Question

I have input field for no of people. Now according to input given I want to display only those table which can accomodate the input value.

<div class="control-group ">
    <label class="control-label" for="Name">No. of people :</label>  
    <div class="controls">
        <input type="text" name="num_of_people" id="num_of_people" required>
    </div>
</div>
<div class="control-group ">
    <label class="control-label" for="Name"> Select Table :</label>
    <div class="controls">
        <select name="table_id" id="table_id" class="reserv_select">
            <option value="">Select</option>
            <?php foreach ($tables as $table) { ?>
                <option rel="<?php echo $table->num_of_people ?>" value="<?php echo $table->id ?>"><?php echo $table->table_num ?></option>
            <?php } ?>
        </select>
    </div>
</div>

where rel in option value give the no of people.How do I achieve this using jQuery.

I have tried the following:

<script type="text/javascript">
    $(document).ready(function() {
        var select = $('#table_id');
        var options = select.find('option');
        $('#num_of_people').change(function() {
            var visible = options.filter('[value="' + $(this).val() + '")]').show();
            options.not('visible').hide();
        })
    })
</script>

Any help/suggestions i really helpful. Thanks in advance.

Answer 1

尝试

    $('#num_of_people').change(function() {
        options.hide().filter('[value="' + $(this).val() + '"]').show();
    })