jQuery函数，一个用于显示点击下拉菜单，另一个用于从下拉菜单中获取选定的项目 [英] jQuery functions, one to display dropdown on click and another to get selected item from dropdown

问题描述

我有一个无序列表（下面的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>

解决方案

1. IDs have to be unique
2. 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屋！