提取引导下拉值OnSubmit [英] Fetch Bootstrap Dropdown Value OnSubmit
问题描述
使用 Bootstrap
下载
Dropdown made using 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>
对于上述下拉菜单,我正在获取选项值
基于用户选择。
For the above dropdown, I am fetching the option value
based on user selection.
在使用 Bootstrap
执行此操作时,我可以保留下拉列表值选择
,但是当我使用 PHP
时,我还需要 $ _POST
变量,以便执行 SQL
查询并根据从下拉列表中选择的值显示结果。
While doing it with Bootstrap
, I am able to keep the the dropdown value selected
, but as I am using it with PHP
, I also need the value in $_POST
variable in order to execute SQL
query and display results based on what value is selected from dropdown.
如何实现?
推荐答案
使用隐藏字段并在用户选择状态时填充。
Use a hidden field and populate it when the user selects a state.
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
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();
});
});
请参阅jsfiddle 使用inspect元素检查隐藏字段的值。
See jsfiddle Use inspect element to check the value of the hidden field.
这篇关于提取引导下拉值OnSubmit的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!