首页 \ 问答 \ 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)

使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)

我的问题是从bootstrap下拉列表中选择一个li元素并将其显示在下拉框中。 当我尝试时,它只更改第一个下拉列表中的文本,第二个下拉事件不起作用。

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1">
                                <li class="dropdown-header">Generic</li>
                                <li><a id="num">Number</a></li>
                                <li><a id="float">Float</a></li>
                                <li><a>Boolean</a></li>
                                <li><a>Character</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Geographical</li>
                                <li><a>Zip Code</a></li>
                                <li><a>City</a></li>
                                <li><a>Region</a></li>
                                <li><a>Countries</a></li>
                                <li><a>Latitude/Longitude</a></li>
</ul>
<div>
<div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
                            <ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2" >
                                <li class="dropdown-header">Generic</li>
                                <li><a id="num">Number</a></li>
                                <li><a id="float">Float</a></li>
                                <li><a>Boolean</a></li>
                                <li><a>Character</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Geographical</li>
                                <li><a>Zip Code</a></li>
                                <li><a>City</a></li>
                                <li><a>Region</a></li>
                                <li><a>Countries</a></li>
                                <li><a>Latitude/Longitude</a></li>
</ul>
<div>

对于这两个下拉菜单,我想在下面的元素内显示选择的文本:

<button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>

我使用jQuery进行选择和显示,但它只发生在第一个下拉菜单中。

$(".dropdown-menu li a").on("click",function(){
  $(".changetext").text($(this).text());
   )}

My problem is to select an li element from bootstrap dropdown and display it in the dropdown box. When I try, it only changes the text from the first dropdown and the second dropdown event doesn't work.

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
<ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1">
                                <li class="dropdown-header">Generic</li>
                                <li><a id="num">Number</a></li>
                                <li><a id="float">Float</a></li>
                                <li><a>Boolean</a></li>
                                <li><a>Character</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Geographical</li>
                                <li><a>Zip Code</a></li>
                                <li><a>City</a></li>
                                <li><a>Region</a></li>
                                <li><a>Countries</a></li>
                                <li><a>Latitude/Longitude</a></li>
</ul>
<div>
<div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
                            <ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2" >
                                <li class="dropdown-header">Generic</li>
                                <li><a id="num">Number</a></li>
                                <li><a id="float">Float</a></li>
                                <li><a>Boolean</a></li>
                                <li><a>Character</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Geographical</li>
                                <li><a>Zip Code</a></li>
                                <li><a>City</a></li>
                                <li><a>Region</a></li>
                                <li><a>Countries</a></li>
                                <li><a>Latitude/Longitude</a></li>
</ul>
<div>

For these two dropdown menus, I want to display the text on selection inside the below element:

<button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>

I use jQuery for making the selection and displaying, but it happens only to the first dropdown menu.

$(".dropdown-menu li a").on("click",function(){
  $(".changetext").text($(this).text());
   )}

原文:https://stackoverflow.com/questions/36269519
更新时间:2020-05-23 14:54

最满意答案

我希望你想要的

$(document).ready(function(){

  $(".dropdown-menu li a").on("click",function(){

  $(".changetext").text($(".changetext").text() + ' ' + $(this).text());

  });

});

结果: https//jsfiddle.net/cmedina/bLts45po/


I hope it what you want

$(document).ready(function(){

  $(".dropdown-menu li a").on("click",function(){

  $(".changetext").text($(".changetext").text() + ' ' + $(this).text());

  });

});

Result: https://jsfiddle.net/cmedina/bLts45po/

2016-03-28

相关文章

更多

最新问答

更多
  • jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)
  • MVC4:ViewModel(带有radiobuttonlist)在HttpPost之后为空(MVC4: ViewModel (with radiobuttonlist) is empty after HttpPost)
  • 如何在同一帐户上设置“Dev repo”(在prod和团队之间)(How to set up a “Dev repo” (between the prod and the team) on the same account)
  • 如何在tcl中将eth0配置为发送方udp端口(how to configure eth0 as a sender udp port in tcl)
  • 如何在datarow []中的列中找到最大值?(How to find max value in a column in a datarow[] ?)
  • 如何使用预定义文本替换来自数据库的部分结果(How do I replace part of result coming from Database with predefined text)
  • Selenium Java注入了新的Javascript函数(Selenium Java inject new Javascript function)
  • 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)
  • 快速将黄土曲线添加到大型数据集图中的方法(Quick way to add loess curve to large data set graph)
  • FilteringSelect in mvc(FilteringSelect in mvc)
  • 在Delphi XE2中开发Mac或iOS应用程序需要哪些硬件/软件?(What hardware/software is necessary to develop Mac or iOS apps in Delphi XE2?)
  • 在原型的构造函数中初始化属性时获取“未定义”(Getting 'undefined' when a property is initialized in the constructor of a prototype)
  • 通过越狱加载的应用程序的Documents文件夹位置(Location of Documents folder for an app loaded via jailbreak)
  • 在OpenGL中使用可编程和固定管道功能(Using both programmable and fixed pipeline functionality in OpenGL)
  • 将任何用户输入重定向到单独的底层程序(redirect any user input to a separate underlying program)
  • 编辑文本不能正常工作android(Edit texts not working properly android)
  • “user_denied”Facebook应用页面上的Facebook用户区域设置(Facebook user locale on “user_denied” facebook app page)
  • 在大图像中找到小的部分透明图像的坐标(find coordinates of small partially-transparent image within a large image)
  • 我如何在cakephp 3.1中获得完整的相对路径?(How i can get full relative path of image in cakephp 3.1?)
  • 如何保存拖动标记的新本地化?(How to save new localization of dragged marker?)
  • MySQL UPDATE vs INSERT和DELETE(MySQL UPDATE vs INSERT and DELETE)
  • 在执行查询之前,在SQLAlchemy模型中将datetime转换为unix时间戳?(Convert datetime to unix timestamp in SQLAlchemy model before executing query?)
  • OpenCL与OpenGL互操作的优势(Advantage of OpenCL interoperability with OpenGL)
  • 如何解析用点和等分隔的数据然后添加到listview(How to parsing data from delimited with dot and equal then add to listview)
  • 带调试输出的X3解析器段错误(BOOST_SPIRIT_X3_DEBUG)(X3 parser segfaults with debug output (BOOST_SPIRIT_X3_DEBUG))
  • 将文件夹名称添加到fgrep结果(Add folder name to fgrep result)
  • 在MySQL中加载一个表是非常慢的(Loading one table in MySQL is ridiculously slow)
  • 如何将JSON放入PHP变量?(How do I put JSON into a PHP Variable?)
  • 如何绕过Microsoft.Speech.Recognition中的不流畅?(How to bypass disfluencies in Microsoft.Speech.Recognition?)
  • 原点的最后一行是什么?(What is the last row of an origin for?)