[英]selected item value from Bootstrap DropDown with specific ID
[英]Get selected item value from Bootstrap DropDown with specific ID
我正在使用Bootstrap 3
和JavaScript “創建”我自己的“ComboBox”。 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());
});
這種方法效果很好,直到我想在頁面上多次重復這個“ComboBox”。 問題在於JQuery函數正在尋找ANY / '.dropdown-menu li a'
。
如何更改我的JQuery以僅查找具有ID demolist的 UL並獲取其選定值?
我試過以下沒有成功:
我試過'#demolist .dropdown-menu li a'
但是這不會'#demolist .dropdown-menu li a'
這個函數:
$(document).on('click', '#demolist .dropdown-menu li a', function() {
$('#datebox').val($(this).html());
});
我嘗試調用#demolist的Click,但#datebox
獲取#datebox
的ALL列表項的HTML而不是選擇的itemHTML項:
$('#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());
});
選擇器將是#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
使用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>
您可能希望將jQuery代碼稍微修改為'#demolist li a'
以便它專門選擇鏈接中的文本而不是li元素中的文本。 這將允許您有一個子菜單,而不會導致問題。 此外,由於您專門選擇了一個標簽,您可以使用$(this).text();
。
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
你剛試過嗎?
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
這個對我有用 :)
作品GReat。
類別問題Apple Banana Cherry <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>
它為我工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.