Question

<div class="container">
                <div class="row">    
                    <div class="col-xs-8 col-xs-offset-2">

                        <div class="input-group">
                            <div class="input-group-btn search-panel">

                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span id="search_concept">Filter</span> <span class="caret"></span>
                                </button>
                                <ul   class="dropdown-menu" role="menu">
                                  <li><a href="#Electronics">electronics</a></li>
                          <li><a href="#Movies">movies</a></li>

                                  <li class="divider"></li>
                                  <li><a href="#all">All</a></li>
                                </ul>
                            </div>
                    <form method="POST" name="form" action="#">

                                <input type="hidden" name="search_param" value="all" id="search_param">         
                                <input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default"  type="submit"><span class="glyphicon glyphicon-search"></span></button>
                        </span>

                    </form>
                        </div>

                    </div>
                   </div>
                </div>

问题每次我按下Go按钮;我重定向到同一页面;然而，我想通过下拉行为时髦;比如在提交表单后，它不会在下拉菜单中用适当的选择过滤器替换“过滤器”按钮。这是代码。然而，在我按下go按钮之前它按预期工作。可能会发生什么？

    <script>
         $(document).ready(function(e){
              $('.search-panel .dropdown-menu').find('a').click(function(e) {
                e.preventDefault();
              var param = $(this).attr("href").replace("#","");
              var concept = $(this).text();
              $('.search-panel span#search_concept').text(concept);
              $('.input-group #search_param').val(param);
              });
            });

  </script>

JS FIDDLE：https://jsfiddle.net/0e37tvyx/

Answer 1

这没有错。您的小提琴代码适用于所有UI更改操作。但由于您的表单支持POST方法，因此所有表单参数都会以POST请求的形式提交。您有三种可能的选项（也可能更多）以保留最后选择的过滤器的状态：

使用ajax请求而不是整个页面刷新的表单提交。这样您就必须在页面中添加服务器响应中的内容;那就是搜索结果。
如果您的内容是动态生成的。我的意思是说您正在使用PHP / JSP / ASP / Any Other Templating Library，您可以使用它来根据搜索请求更新HTML代码，即{{ 1}}请求参数。
另一种方式是使用cookies。当用户更改前端选项时，保留cookie中的过滤器选项search_param。在search_param文件状态;如果存在，请将这些已保存的Cookie读取，如果尚未存储在Cookie中，则回退到默认选项ready。

查看基于cookie实现的小提琴。不是说我添加了jQuery的cookies插件。

https://jsfiddle.net/ksbora/3w6k171f/2

注意：all也有大小限制，并且跨站点发起限制。所以，要小心你选择哪个选项。

使用bootstrap按下搜索按钮后提交表单

1 个答案: