Question

我想为下拉菜单创建一个非常简单的（没有插件和基本布局），该菜单包含选项复选框。例如，如果选择了C和F并且提交了表单，我希望该网址显示/index.php?category1=3&&category2=6

<form action="" method="get">
    <select multiple="multiple" name="category">
        <optgroup label="Category1">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </optgroup>
        <optgroup label="Category2">
            <option value="4">D</option>
            <option value="5">E</option>
            <option value="6">F</option>
        </optgroup>
    </select>

    <br><input type="submit" value="go">
</form>

我甚至不确定如何启动jquery将值传递给url。非常感谢任何帮助！

编辑：我想我可以使用而不是用jquery模拟下拉列表。

这是jsfiddle：http://jsfiddle.net/k6R7g/

如何在选择时显示“2 Selected”而不是“Select ...”？

Answer 1

请参阅下面的代码，自己构建网址，它会起作用。如果表单包含更多值，您可以更好地将类别添加到选项的值。

  <form method="get">
        <select multiple="multiple" name="category">
            <optgroup label="Category1">
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
            </optgroup>
            <optgroup label="Category2">
                <option value="4">D</option>
                <option value="5">E</option>
                <option value="6">F</option>
            </optgroup>
        </select>

        <br><input type="button" value="go" onclick="clicked();">
    </form>

    <script type="text/javascript">
    function clicked(){
        var v = "";
        $('select').find(":selected").each(
            function(){
                if (v != ""){
                    v += "&";
                }
                v += $(this).parent()[0].label + '=' + $(this).context.value; 
                }
            );

        window.location.href = "index.php?" + v;
    }
    </script>

将变量传递给url的简单多选复选框下拉列表

1 个答案: