试图从选择菜单中显示隐藏多个 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"> $</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>
<a href="javascript:hideDiv(\'row'.$list[part_no].'\');" /><img src="support/btn-update-close.png" />Close</a>
</form>
</td>
</tr>';