2012-12-01 47 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