2012-12-01 46 views
0

试图在选择菜单中显示隐藏多个div。我工作得很好,除非它第一次出现在页面上。之后它只显示所有的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>'; 

回答

0

id s的意思是独特的,即它们只在页面上出现一次。要使用有什么是class代替:

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

显然有什么阻止你在页面上的各种斑点使用相同的id的,但你可以看到,它是行不通的。

+0

谢谢。我完全忽略了表单名称。我更新代码来使用类,但它仍然表现出相同的行为。在您第一次切换时工作,但如果您使用另一个实例,它将保持相反的状态。也许使用切换? – macericpet