在提交时获取引导程序下拉值

Question

使用Bootstrap制作的下拉菜单

<form id="search" action="" method="post" >
    <div class="dropdown">
      <button data-toggle="dropdown" id="dropdownMenu1" type="button" class="btn btn-default dropdown-toggle">Fixed <span class="caret"></span></button>

      <ul aria-labelledby="dropdownMenu1" role="menu" class="dropdown-menu">
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Florida</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Texas</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Washington</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">New York</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Ohio</a></li>
          </ul>
    </div>
</form>

jQuery 保持下拉选项被选中

var jQee = jQuery.noConflict();
jQee(".dropdown-menu li").click(function(){
    var selText = jQee(this).text();
    jQee(this).parents('.dropdown').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
    //jQee('#search').submit();
});

HTML 下拉菜单

<select onchange="form.submit()" name="template">
    <option value="F" selected="true">Florida</option>
    <option value="T">Texas</option>
    <option value="W">Washington</option>
    <option value="N">New York</option>
    <option value="O">Ohio</option>
</select>

对于上述下拉列表，我正在根据用户选择获取option value。

在使用Bootstrap 执行此操作时，我可以保留下拉值selected，但是当我将它与PHP 一起使用时，我还需要$_POST 变量中的值才能执行@ 987654330@根据从下拉列表中选择的值查询和显示结果。

我怎样才能实现它？

Answer 1

使用隐藏字段并在用户选择状态时填充它。

HTML

<form id="search" action="" method="post" >
    <input type="hidden" name="selection">
    <div class="dropdown">
      <button data-toggle="dropdown" id="dropdownMenu1" type="button" class="btn btn-default dropdown-toggle">Fixed <span class="caret"></span></button>

      <ul aria-labelledby="dropdownMenu1" role="menu" class="dropdown-menu">
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Florida</a></li>
          <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Texas</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Washington</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">New York</a></li>
            <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Ohio</a></li>
          </ul>
    </div>
</form>

JavaScript

$(document).ready(function() {
    $("ul li a").click(function() {
        text = $(this).closest("li").text();
        $("input[name='selection']").val(text);
        $(this).parents('.dropdown').find('.dropdown-toggle').html(text+' <span class="caret"></span>');
        $("#search").submit();
    });
});

See jsfiddle使用inspect元素检查隐藏字段的值。