[英]Get selected item value from Bootstrap DropDown with specific ID
I am "creating" my own "ComboBox" using Bootstrap 3
and JavaScript . 我正在使用
Bootstrap 3
和JavaScript “创建”我自己的“ComboBox”。 Here is the JSFiddle
for what I have so far: Here is the JSFiddle
迄今为止我所拥有Here is the JSFiddle
:
<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>
$(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. 这种方法效果很好,直到我想在页面上多次重复这个“ComboBox”。 The issue is with the JQuery function looking for ANY/ALL
'.dropdown-menu li a'
. 问题在于JQuery函数正在寻找ANY /
'.dropdown-menu li a'
。
How can I change my JQuery to look only for UL with ID demolist and get its selected value? 如何更改我的JQuery以仅查找具有ID demolist的 UL并获取其选定值?
I have tried the following without success: 我试过以下没有成功:
I tried '#demolist .dropdown-menu li a'
but that will not fire the function: 我试过
'#demolist .dropdown-menu li a'
但是这不会'#demolist .dropdown-menu li a'
这个函数:
$(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的Click,但
#datebox
获取#datebox
的ALL列表项的HTML而不是选择的itemHTML项:
$('#demolist').on('click', function(){
$('#datebox').val($(this).html());
});
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());
});
The selector would be #demolist.dropdown-menu li a
note no space between id and class. 选择器将是
#demolist.dropdown-menu li a
注意id和class之间没有空格。 However i would suggest a more generic approach: 但是,我建议采用更通用的方法:
<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());
});
by using a class rather than id, and using parent().find()
, you can have as many of these on a page as you like, with no duplicated js 通过使用类而不是id,并使用
parent().find()
,您可以在页面上拥有任意数量的这些,没有重复的js
Design code using Bootstrap 使用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>
<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>
You might want to modify your jQuery code a bit to '#demolist li a'
so it specifically selects the text that is in the link rather than the text that is in the li element. 您可能希望将jQuery代码稍微修改为
'#demolist li a'
以便它专门选择链接中的文本而不是li元素中的文本。 That would allow you to have a sub-menu without causing issues. 这将允许您有一个子菜单,而不会导致问题。 Also since your are specifically selecting the a tag you can access it with
$(this).text();
此外,由于您专门选择了一个标签,您可以使用
$(this).text();
. 。
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
Did you just try 你刚试过吗?
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
It works for me :) 这个对我有用 :)
Works GReat. 作品GReat。
<input type="text" name="cat_q" id="cat_q"> $(document).ready(function(){ $("#btn_cat div a").click(function(){ alert($(this).text()); }); });
Try this code 试试这个代码
<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>
its work for me 它为我工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.