jQuery函数,一个用于显示点击下拉菜单,另一个用于从下拉菜单中获取选定的项目 [英] jQuery functions, one to display dropdown on click and another to get selected item from dropdown
本文介绍了jQuery函数,一个用于显示点击下拉菜单,另一个用于从下拉菜单中获取选定的项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个无序列表(下面的HTML和Javascript代码如下)。
第一个函数display_dropdown_multiple适用于我。不过,我在
第二个函数get_selected_owner中遇到了问题。
从下拉菜单中选择后。我想第二个函数返回'选定的值'。任何帮助将不胜感激。
function display_dropdown_multiple(event){$( ('.btn-group')。find('.btn')。text($().dropdown-menu)。on('click','li a',function(){$(this).parents这个).text()); $(this).parents(.btn-group)。find('。btn').val($(this).data('value'));});} ); function get_selected_owner(){return $('#owner')。find('option:selected')。val(); }); });
< div class =btn-group > < button type =buttonclass =btn btn-success dropdown-toggleid =ownerdata-toggle =dropdown>所有者< span class =caret>< / span> < /按钮> < ul class =dropdown-menurole =menuaria-labelledby =owner-dropdown-menu> < li role =presentationclass =dropdown-header> major< / li> < li role =presentation>< a role =menuitemtabindex = - 1href =#id =owner>< input type =hiddenonclick ='display_dropdown_multiple )'id =ownerIdname =ownerIdvalue =Owner 1> Owner 1< / a>< / li> < li class =divider>< / li> < li role =presentationclass =dropdown-header>次要< / li> < li>< a href =#id =owner>< input type =hiddenonclick ='display_dropdown_multiple(event)'id =ownerIdname =ownerIdvalue =Owner 2 >所有者2< / a>< / li> < li>< a href =#id =owner>< input type =hiddenonclick ='display_dropdown_multiple(event)'id =ownerIdname =ownerIdvalue =Owner 3 >所有者3< / a>< / li> < / div>< / div>
解决方案
ID必须是唯一的
没有
< option>
您的目标。
解决方案
构建一个< select>
,其中包含您打算使用唯一ID的选项,然后您的代码将正常工作。
I have an unordered list (HTML below and Javascript code is below).
The first function "display_dropdown_multiple" works for me. However, I'm having issues with the second function "get_selected_owner".
After making a selection from dropdown menu. I want the second function to return the 'selected value'. Any help would be appreciated.
function display_dropdown_multiple(event) {
$(".dropdown-menu").on('click', 'li a', function(){
$(this).parents(".btn-group").find('.btn').text($(this).text());
$(this).parents(".btn-group").find('.btn').val($(this).data('value'));
});
});
function get_selected_owner() {
return $('#owner').find('option:selected').val();
});
});
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" id="owner" data-toggle="dropdown">
Owner <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="owner-dropdown-menu">
<li role="presentation" class="dropdown-header">major</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" id="owner"><input type="hidden" onclick='display_dropdown_multiple(event)' id="ownerId" name="ownerId" value="Owner 1" >Owner 1</a></li>
<li class="divider"></li>
<li role="presentation" class="dropdown-header">minor</li>
<li><a href="#" id="owner"><input type="hidden" onclick='display_dropdown_multiple(event)' id="ownerId" name="ownerId" value="Owner 2" >Owner 2</a></li>
<li><a href="#" id="owner"><input type="hidden" onclick='display_dropdown_multiple(event)' id="ownerId" name="ownerId" value="Owner 3" >Owner 3</a></li>
</ul>
</div>
解决方案
- IDs have to be unique
- There is no
<option>
which you're targeting.
Solution
Construct a <select>
with options you intend to use with unique ids and then you're code will work fine.
这篇关于jQuery函数,一个用于显示点击下拉菜单,另一个用于从下拉菜单中获取选定的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文