jQuery 筆記 – 同步兩個 option buttons 的值

情境 :
在一連串 table 的網頁介面. 如果把 option button 部分設計在最下方. 那當table資料很多的時候就要一直捲動捲到最下方. 小不方便. 所以還要在多設計一個 option button 在網頁的最上方. 但是在同一個 form 如果裡面變數名稱命名不一樣的名稱到 option button 上. 那代表要在 php 裡面去處理那個兩個變數名稱. 也要處理使用者是按了上面的 action button 還是下面的 action button. 看起來有點麻煩.

解法 :
為了簡化這個問題, 我使用 jquery 幫忙同步兩個option buttons 的值. 下列是html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<form method="POST" action="#">
      <h3>Available actions
      <select id="paction" name="paction">
        <option value="on">Power On</option>
 
        <option value="off">Power Off</option>
        <option value="soft">Graceful Shutdown</option>
        <option value="reset">Reset System (warm boot)</option>
        <option value="cycle">Power Cycle System (cold boot)</option>
      </select>
      <input type="submit" name="submit" value="Perform action"></h3>
omit......
      <h3>Available actions
      <select id="paction2" name="paction">
        <option value="on">Power On</option>
 
        <option value="off">Power Off</option>
        <option value="soft">Graceful Shutdown</option>
        <option value="reset">Reset System (warm boot)</option>
        <option value="cycle">Power Cycle System (cold boot)</option>
      </select>
      <input type="submit" name="submit" value="Perform action"></h3>
</form>

命名了兩個 option buttons 的 id 名稱. 但那兩個 option button 的 name 是一樣的. 然後再使用下列 jquery 語法. 就可以將這兩個不同的 option buttons 同步.

1
2
3
4
5
6
7

    $("#paction").change(function() {
        $("#paction2").val($("#paction").val());
    });
 
    $("#paction2").change(function() {
        $("#paction").val($("#paction2").val());
    });

其實只要把下面的值同步成真正要處理的值就可以了. 因為網頁 submit 後. 同名稱變數(paction)的話是看最後一個值. 但是為了要求完美. 所以我在把下面的 option button 同步回去第一個 option button

最後看一下 DEMO