从具有特定ID的Bootstrap DropDown中获取选定的项目值

本文介绍了从具有特定ID的Bootstrap DropDown中获取选定的项目值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我使用 引导程序3 和 JavaScript 创建我自己的ComboBox。 这是JSFiddle 到目前为止： HTML： < div class =input-group> < input type =TextBoxID =dateboxClass =form-control>< / input> < div class =input-group-btn> < button type =buttonclass =btn dropdown-toggledata-toggle =dropdown> < span class =caret>< / span> < / button> < ul id =demolistclass =dropdown-menu> < li>< a href =＃> A< / a>< / li> < li>< a href =＃> B< / a>< / li> < li>< a href =＃> C< / a>< / li> < / ul> < / div> < / div> JavaScript： $（document）.on（'click'，'.dropdown-menu li a'，function（）{ $（'＃datebox'）。val $（this）.html（））; }）; 这种方法很好，直到我想在页面上多次重复这个ComboBox。问题在于使用JQuery函数查找ANY / ALL '。dropdown-menu li a'。 如何更改我的JQuery以仅查找带有标识 demolist 的UL 并获取其 selected value？ 我尝试了以下方法但未成功： 我试过'＃demolist .dropdown-menu li a'但不会触发该函数： }）; 我尝试调用 #demolist 的点击，但 #datebox 获取#demolist的所有列表项目的HTML，而不是选择的项目的innerHTML： $（'＃demolist'）。 ; }）; 更新： ： $（'＃demolist li a'）。on（'click'，function（）{ $ （'#datebox'）。val（$（this）.html（））; }）; 或 }）; 解决方案 $（ （'click'，function（）{ $（'＃datebox'）。val（$（this）.text（））; }）; http： //jsfiddle.net/kcpma/18/ I am "creating" my own "ComboBox" using Bootstrap 3 and JavaScript. Here is the JSFiddle for what I have so far:HTML:<div class="input-group"> <input type="TextBox" ID="datebox" Class="form-control"></input> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul id="demolist" class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div></div>JavaScript:$(document).on('click', '.dropdown-menu li a', function() { $('#datebox').val($(this).html());}); This approach works great untill I want to repeat this "ComboBox" several times on the page. The issue is with the JQuery function looking for ANY/ALL '.dropdown-menu li a'. How can I change my JQuery to look only for UL with ID demolist and get its selected value?I have tried the following without success:I tried '#demolist .dropdown-menu li a' but that will not fire the function:$(document).on('click', '#demolist .dropdown-menu li a', function() { $('#datebox').val($(this).html());}); I tried calling the Click of #demolist but #datebox gets the HTML of ALL list item of #demolist and not the selected innerHTML of item:$('#demolist').on('click', function(){ $('#datebox').val($(this).html());});UPDATE:The working solutions are:$('#demolist li a').on('click', function(){ $('#datebox').val($(this).html());});OR$('#demolist li').on('click', function(){ $('#datebox').val($(this).text());}); 解决方案 $('#demolist li').on('click', function(){ $('#datebox').val($(this).text());});http://jsfiddle.net/kcpma/18/ 这篇关于从具有特定ID的Bootstrap DropDown中获取选定的项目值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！