简单的多重选择复选框下拉传递变量到url - Simple multiple selection checkbox dropdown that passed variables to the url

Simple multiple selection checkbox dropdown that passed variables to the url

本文关键字：变量 url 选择复选框简单 | 更新日期: 2023-09-27

我想创建一个非常简单(没有插件和基本布局)的下拉菜单，有复选框的选项。例如，如果选择了C和F，并且提交了表单，我希望url显示/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选定"而不是"选择…"时，选择作出?

参见下面的代码，自己构建url，它将工作。如果表单包含更多的值，您可以更好地将类别添加到选项的值中。

  <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>