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

Get selected item value from Bootstrap DropDown with specific ID

本文关键字：ID 选项 项目 DropDown Bootstrap 获取      更新时间：2023-09-26

我正在使用Bootstrap 3和JavaScript"创建"我自己的"组合框">Here is the JSFiddle对于我目前所拥有的：

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());
});

这种方法非常有效，直到我想在页面上重复这个"组合框"几次。问题在于JQuery函数查找ANY/ALL '.dropdown-menu li a'。

如何将我的JQuery更改为仅查找ID为脱模工的UL，并选择其值

我尝试了以下操作，但没有成功：

我尝试了'#demolist .dropdown-menu li a'，但这不会触发功能：

$(document).on('click', '#demolist .dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

我尝试调用#demolist的Click，但#datebox得到#demolister的ALL列表项的HTML，而不是选择的项目的内部HTML：

$('#demolist').on('click', function(){
    $('#datebox').val($(this).html());
});

更新：

有效的解决方案是：

$('#demolist li a').on('click', function(){
    $('#datebox').val($(this).html());
});

或

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});

http://jsfiddle.net/kcpma/18/

使用Bootstrap 设计代码

<div class="dropdown-menu" id="demolist">
  <a class="dropdown-item" h ref="#">Cricket</a>
  <a class="dropdown-item" href="#">UFC</a>
  <a class="dropdown-item" href="#">Football</a>
  <a class="dropdown-item" href="#">Basketball</a>
</div>

  • jquery代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('#demolist a').on('click', function () {
      var txt= ($(this).text());
      alert("Your Favourite Sports is "+txt);
    });
  });
</script>

选择器将是#demolist.dropdown-menu li a注意id和class之间没有空格。然而，我建议采用一种更通用的方法：

<div class="input-group">                                            
    <input type="TextBox" Class="form-control datebox"></input>
    <div class="input-group-btn">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>
</div>

$(document).on('click', '.dropdown-menu li a', function() {
    $(this).parent().parent().parent().find('.datebox').val($(this).html());
});

通过使用类而不是id，并使用parent().find()，您可以在一个页面上拥有任意多个这样的类，而不需要重复的js-

你刚试过吗

$('#datebox li a').on('click', function(){
    //$('#datebox').val($(this).text());
    alert($(this).text());
});

它对我有效：(

您可能需要将jQuery代码修改为'#demolist li a'，以便它专门选择链接中的文本，而不是li元素中的文本。这将允许您在不引发问题的情况下拥有子菜单。此外，由于您是专门选择一个标签的，您可以使用$(this).text();访问它。

$('#datebox li a').on('click', function(){
    //$('#datebox').val($(this).text());
    alert($(this).text());
});

工作GReat。

类别问题苹果香蕉樱桃
<input type="text" name="cat_q" id="cat_q">  
$(document).ready(function(){
    $("#btn_cat div a").click(function(){
       alert($(this).text());
    });
});

尝试此代码

<input type="TextBox" ID="yearBox" border="0" disabled>
$('#yearSelected li').on('click', function(){
                $('#yearBox').val($(this).text());
            });

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fas fa-calendar-alt"></i> <span>Academic Years</span> <i class="fas fa-chevron-down"></i> </a>
          <ul class="dropdown-menu">
            <li>
              <ul class="menu" id="yearSelected">
                <li><a href="#">2014-2015</a></li>
                <li><a href="#">2015-2016</a></li>
                <li><a href="#">2016-2017</a></li>
                <li><a href="#">2017-2018</a></li>
              </ul>
            </li>
          </ul>

它对我的工作

相关文章：