根据输入值仅显示下拉菜单中的选项值

时间:2013-06-03 10:04:41

标签: jquery

我没有人的输入字段。现在根据给出的输入我想只显示那些可以容纳输入值的表。

<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 in option value给出了no的人。如何使用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>

任何帮助/建议我真的很有帮助。提前谢谢。

1 个答案:

答案 0 :(得分:0)

尝试

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