Question

我正在努力实现此屏幕截图上的内容：

screen

它基本上是PHP / Html中的一个表单，并且运行良好。但这并不是我想做的事。

我想从左侧获取元素并将它们放在右侧，并使用右侧元素验证表单。

atm，一切都很顺利，但我的问题是：在提交表单之前，需要“选择”右侧的所有元素。

有没有办法做到这一点，而没有右侧的元素被“选中”。

从技术上讲，我只是希望默认情况下在表单中选中右侧的“推送元素”。

我想我的问题来自于我使用select而不是其他类型的输入（我可以使用textarea或其他类型的输入吗？）

感谢

仅供参考，这是我的源代码

的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"中删除select和selectBoxOne：

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

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

只需将一些选项从左侧移动到右侧选择框，然后点击“提交”按钮，在页面刷新后查看POST数据结果。

替换输入类型通过某种列表选择多个来强制选定的元素

1 个答案: