通過某種名單的強制選擇的元素

Question

更換輸入類型選擇多個

我想實現的東西就像這個截圖：

screen

它基本上是在PHP/HTML形式，並很好地工作。然而它並不完全是我想要做的。

我想從左側取元素並將它們放在右側，並使用右側元素驗證表單。

atm，一切正常，但我的問題是：提交表格之前需要「選擇」右側的所有元素。

有沒有這樣做的方式，而沒有右側的元素被「選中」。

從技術上講，我只是想將右側的「推送元素」全部默認選中。

我想我的問題來自於事實，我使用的，而不是另一種輸入的選擇（我可以用一個文本，或某種其他輸入的？）

感謝

僅供參考，這裏是這個

的JavaScript

<script type="text/javascript" language="Javascript"> 

      function move(sens) { 

        var i, sourceSel, targetSel; 

        if (sens == 'right') { 
          sourceSel = document.getElementById('selectBoxOne'); 
          targetSel = document.getElementById('selectBoxSecond'); 
        } else { 
          sourceSel = document.getElementById('selectBoxSecond'); 
          targetSel = document.getElementById('selectBoxOne'); 
        } 

        i = sourceSel.options.length; 
        while (i--) { 
          if (sourceSel.options[i].selected) { 
            targetSel.appendChild(sourceSel.options[i]); 
          } 
        } 
      } 

      </script> 

PHP/HTML

我的源代碼

<tr> 
         <th>Associated rights</th> 
         <td> 
          <table border="0" cellspacing="0" id="table"> 
          <tr> 
            <td> 
              Available (unused) rights (pbroles) <br /> 
              <select name="kiki" multiple="multiple" id="selectBoxOne" size="10" style="width: 325px"> 
              <?php 
              $q_pbroles = ' 
                SELECT 
                  p.name 
                FROM 
                  firecall_pbroles p 
                WHERE 
                  p.name not in (
                      SELECT 
                  p.name 
                FROM 
                  firecall_pbroles p, 
                  firecall_roles r, 
                  firecall_l_roles l, 
                  firecall_pbroles_types t 
                WHERE 
                  p.id = l.pbrole_id 
                AND 
                  r.id = l.role_id 
                AND 
                  t.id = p.type 
                AND 
                  r.id = '.$role_id.' 
                      ) 
                ;'; 
              $prep = $dbh->prepare($q_pbroles); 
              $prep->execute(); 
              $arrAll = $prep->fetchAll(); 
              foreach($arrAll as $data) 
              { 
                echo '<option id="multiple'.$data['id'].'" value="'.$data['id'].'">'.$data['name'].'</option>'; 
              } 
              ?> 
              </select> 
              <br /> 
              Ctrl+Click to select multiple pbroles 
            </td> 
            <td> 
              <input type="button" value="<<" onclick="move('left');"><br /> 
              <input type="button" value=">>" onclick="move('right');"> 
            </td> 
            <td> 
              pbroles in this Role<br /> 
              <select name="pbRoles[]" multiple="multiple" id="selectBoxSecond" size="10" style="width: 325px"> 
              <?php 
              $q_pbroles = ' 
                      SELECT 
                        p.id, 
                        p.name, 
                        t.roletype, 
                        t.descr 
                      FROM 
                        firecall_pbroles p, 
                        firecall_roles r, 
                        firecall_l_roles l, 
                        firecall_pbroles_types t 
                      WHERE 
                        p.id = l.pbrole_id 
                      AND 
                        r.id = l.role_id 
                      AND 
                        t.id = p.type 
                      AND 
                        r.id = '.$role_id.' 
                      ORDER BY 
                        p.type; 
                      '; 
              $prep = $dbh->prepare($q_pbroles); 
              $prep->execute(); 
              $arrAll = $prep->fetchAll(); 
              foreach($arrAll as $data) 
              { 
                echo '<option id="multiple'.$data['id'].'" value="'.$data['id'].'" selected>'.$data['name'].'</option>'; 
              } 
              ?> 
              </select> 
              <br /> 
              Ctrl+Click to select multiple pbroles 
            </td> 


          </tr> 
          </table> 
         </td> 
        </tr> 

Answer 1

有幾種方法可以實現這一點。

See Paul Dixon's answer on "how to pass array through hidden field"

您可以添加事件偵聽器的形式提交事件，然後每個selectBoxSecond選項添加到一個隱藏字段的形式裏面是這樣的：

var form = document.getElementsByTagName('form')[0]; 

form.onsubmit = function(e) { 

    var elements = document.getElementsByClassName('hidden_pbRoles'); 
    while(elements.length > 0){ 
     elements[0].parentNode.removeChild(elements[0]); 
    } 

    var sourceSel = document.getElementById('selectBoxSecond'); 
    i = sourceSel.options.length; 
    while (i--) { 

     var input_hidden = document.createElement("input"); 
     input_hidden.setAttribute('name', 'pbRoles[]'); 
     input_hidden.setAttribute('type', 'hidden'); 
     input_hidden.setAttribute('value', sourceSel.options[i].text); 

     form.appendChild(input_hidden); 
    } 
}; 

現在，您也可以刪除name和multiple="multiple"從第二selectselectBoxOne：

<select id="selectBoxSecond" size="10" style="width: 325px"> 
</select> 

您可以在這裏查看我的工作示例：http://zikro.gr/dbg/html/listpost.php

只需將選項從左到右選擇框中的某些選項，然後點擊提交按鈕即可在頁面刷新後查看POST數據結果。