jquery - 入力値に基づいてドロップダウン メニューからオプション値のみを表示

Question

私は何人も入力フィールドを持っていません。与えられた入力に従って、入力値に対応できるテーブルのみを表示したいと思います。

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

オプション値の rel は人数を示します。jQuery を使用してこれを達成するにはどうすればよいですか。

私は次のことを試しました：

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

ヘルプ/提案は本当に役に立ちます。前もって感謝します。