如何获得下拉列表的值并使其成为Laravel中的Input变量?

时间:2016-08-06 19:09:09

标签: javascript php html twitter-bootstrap laravel-5

我使用Laravel和Bootstrap创建的网站有一个搜索栏和一个下拉列表,可以将搜索范围缩小到特定类别。以下是搜索栏的以下代码:

display:none

当我输入&#34; hello world&#34;进入搜索栏并提交表单,我会被重定向到此网址:<div class="container"> <form id="search_form" method="get" action="{{ route('search') }}"> <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 name="category" id="search_concept">Title</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#title">Title</a></li> <li><a href="#author">Author</a></li> <li><a href="#school">School</a></li> <li><a href="#course_code">Course Code</a></li> </ul> </div> <!--<input type="hidden" name="_token" value="{{ Session::token() }}">--> <input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter"> <span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span> </div> </div> </div> </form> </div>
我还要选择下拉列表中的选定值,因此当我选择“标题”时,作为我在下拉列表中的类别并提交表单,我将被重定向到:

http://localhost:8000/search?term=hello+world

我该如何处理?

1 个答案:

答案 0 :(得分:0)

您可以像这样修改它并使用jQuery / js

<div class="container">
    <form id="search_form" method="get" action="{{ route('search') }}">
        <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 name="category" id="search_concept">Title</span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                          <li><a data-category="title" class="search_category" href="#title">Title</a></li>
                          <li><a data-category="author" class="search_category" href="#author">Author</a></li>
                          <li><a data-category="school" class="search_category" href="#school">School</a></li>
                          <li><a data-category="course_code" class="search_category" href="#course_code">Course Code</a></li>
                        </ul>
                    </div>
                    <!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->         
                     <input type="hidden" name="category" id="category"/>
                    <input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
                    <span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>

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

jQuery的:

$(".search_category").click(function(e){
    $("#category").val($(this).attr("data-category"));
});