数据不会发送到数据库,因为脚本使选择选项更容易,为什么?

时间:2017-10-22 21:47:14

标签: database forms

如果我使用以下脚本,我可以通过单击多个菜单中的多个菜单来选择,而不是按strg等。

但问题是,所有选中的元素都不会发送到我的数据库。如果我关闭脚本,一切正常。

我怎样才能使用我在第一句中解释的舒适度,而且还会将所有内容发送到我的数据库而不是空数组。

<script>
 window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
    e.preventDefault();

    // toggle selection
    if (el.hasAttribute('selected')) el.removeAttribute('selected');
    else el.setAttribute('selected', '');

    // hack to correct buggy behavior
    var select = el.parentNode.cloneNode(true);
    el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}      
</script>

1 个答案:

答案 0 :(得分:0)

我将您的代码放在一个带有两个select multiple字段的简单表单的测试页上,它似乎正常工作。当我在Chrome中测试时,它会正确提交表单字段,包括select字段。

<html>

<body>

    <form method="GET">
        <div>
            <label>Field 1</label>
            <input type="text" name="f1" />
        </div>
        <div>
            <label>Field 2</label>
            <select name="f2" multiple="multiple">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <div>
            <label>Field 3</label>
            <select name="f3" multiple="multiple">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <input type="submit" />
        <script>
            window.onmousedown = function(e) {
                var el = e.target;
                if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
                    e.preventDefault();

                    // toggle selection
                    if (el.hasAttribute('selected')) el.removeAttribute('selected');
                    else el.setAttribute('selected', '');

                    // hack to correct buggy behavior
                    var select = el.parentNode.cloneNode(true);
                    el.parentNode.parentNode.replaceChild(select, el.parentNode);
                }
            }
        </script>
    </form>

</body>

</html>