Question

尝试显示从选择菜单隐藏多个div。我有它工作正常，但它只在它第一次出现在页面上时才有效。之后它只显示所有的div。

<script type="text/javascript">
    $(document).ready(function() {
        $('#part_update').change(function() {
            $("#update_form div:not('.alwaysShow')").hide();
            $("#update_form .show" + $('#part_update').val()).show();
        });

        $('#part_update').change(); // simulate a change event to trigger the above
    });
</script>

HTML：

//WRITE THE ROW WITH THE ADDITIONAL OPTIONS FOR EDITING
echo '<tr id="row'.$list[part_no].'" style="display:none" class="options_row">
    <td colspan="7">
        <form name="fm'.$list[part_no].'" id="update_form" class="updateContainer" method="post" action="process_pm.php">
            <input type="hidden" name="cur_cat" value="'.$_GET[cat].'">
            <input type="hidden" name="show" value="'.$_GET[show].'">
            <input type="hidden" name="pagenum" value="'.$_GET[pagenum].'">
            <input type="hidden" name="findtype" value="'.$_GET[findtype].'">
            <input type="hidden" name="action" value="update"/>
            <input type="hidden" name="part_no" value="'.$list[part_no].'" />
            <div class="alwaysShow">
                <select id="part_update" >
                    <option value="Add" >Add New Inventory</option>
                    <option value="Update">Update Existing Inventory</option>
                </select>
            </div>
            <div class="showAdd" >
                <label for="part_cost">&nbsp;$</label><input type="text" name="part_cost" id="part_cost" class="help" title="Enter Total Invoice Cost" >
            </div>
            <div class="showAdd showUpdate" ><input type="text" name="part_qty" id="part_qty" class="help" title="Enter Qty" ></div>
            <div class="showUpdate" >
                <input name="update_type" type="radio" value="add_qty" checked> Add
                <input name="update_type" type="radio" value="set_qty" > Set
            </div>
            <div class="alwaysShow"><input type="submit" name="submit" class="alwaysShow" value="Submit"></div>
            &nbsp;&nbsp;<a href="javascript:hideDiv(\'row'.$list[part_no].'\');" /><img src="support/btn-update-close.png" />Close</a>
        </form>
    </td>
</tr>';

Answer 1

id s应该是唯一的，即它们应该只在页面上出现一次。你想要使用的是class而是：

$('.part_update').change(function() {
    /* so on and so forth... */
}

显然没有什么可以阻止你在页面上的不同位置使用相同的id，但正如你所看到的，它不起作用。

从选择菜单控制多个div（在页面上多次）

1 个答案: