从具有特定ID的Bootstrap DropDown中获取选定的项目值 [英] Get selected item value from Bootstrap DropDown with specific ID

问题描述

我使用 引导程序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'但不会触发该函数：

<$ p $ （$（'＃datebox'）。val（$（$'$'$'$'$'$' this）.html（））;
}）;

我尝试调用 #demolist 的点击，但 #datebox 获取#demolist的所有列表项目的HTML，而不是选择的项目的innerHTML：

<$ p $（$＃$ date）'val（$（this）.html（））$（'＃c $ c> $（'＃demolist'）。 ;
}）;

更新：

：

  $（'＃demolist li a'）。on（'click'，function（）{
 $ （'#datebox'）。val（$（this）.html（））; 
}）; 
  

或

< $（'＃datebox'）。val（$（this）.text（$'$ c $'）$（'＃demolist li'）。 （））;
}）;

解决方案

  $（ （'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中获取选定的项目值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！