如何制作行为类似于select Form元素的dropdown-menu和dropdown-toggle类

Bawenang Rukmoko Pardian Putra

我需要一个下拉菜单,它将更改按钮的标签/像selectHTML中标记一样进行切换我怎么做?

添加一些代码进行澄清,尽管这样做不会有多大帮助。我知道如何使用Bootstrap制作下拉菜单。我知道如何制作HTML表单选择按钮。我要问的是如何将两者结合起来。这是我的下拉菜单代码:

   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Daily
      <span class = "caret"></span>
   </button>

   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Daily</a></li>
      <li><a href = "#">Weekly</a></li>
      <li><a href = "#">Monthly</a></li>
   </ul>

但是使用该代码,更改选项后按钮的标签将不会更改。我知道是否要更改按钮的标签,必须将其设置为选择按钮。为了使其成为一个简单的选择按钮,我将必须这样做:

<select name="time_range">
  <option value="daily">Daily</option>
  <option value="weekly">Weekly</option>
  <option value="monthly">Monthly</option>
</select>

但是我仍然想保留Bootstrap下拉菜单的外观。

阿尼鲁德·曼加尔韦德赫卡

Html

<div class="dropdown">
      <button id="dropdown-button" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="dropdownList">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </div>

jQuery的

$(document).ready(function() {
  $('#dropdownList li').find("a").click(function(){

    $('#dropdown-button').html($(this).html());
  });
});

还有很多其他方法可以完成..希望这对您有帮助... Codepen链接

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何设计行为类似于根类的python类

来自分类Dev

jQuery Toggle div和类

来自分类Dev

如何在julia中创建行为类似于具有公共/私有字段和方法的标准Java类的“单一分发,面向对象的类”

来自分类Dev

Jquery Select Dropdown 添加或删除类

来自分类Dev

普通<select>元素与在移动设备上呈现的Bootstrap的dropdown元素

来自分类Dev

普通<select>元素与在移动设备上呈现的Bootstrap的dropdown元素

来自分类Dev

xdotool:如何通过标题和具有不同模式的类搜索窗口(类似于AutoHotkey)

来自分类Dev

CSS Dropdown menu/container?

来自分类Dev

如何定义和实现行为类似于dict构造函数/更新的函数

来自分类Dev

jQuery toggle()添加和删除类

来自分类Dev

Javascript Toggle类工作但类在下拉元素中无效

来自分类Dev

类变量的行为类似于实例变量(Python 3.4)

来自分类Dev

python类的行为类似于字典或列表数据

来自分类Dev

如何使不是其抽象类的子类的接口实现者的行为类似于该接口的抽象类?

来自分类Dev

如何使用 DropDown 加载和打开文件?

来自分类Dev

为什么块元素的行为类似于内联元素?

来自分类Dev

如何使classList.toggle跟随类的CSS

来自分类Dev

如何制作行为类似于Session []集合的集合?C#

来自分类Dev

无法重新定义BootStrap的dropdown-menu类的字体大小

来自分类Dev

如何使用类似于float之类的内置方法和功能来建立一个类,但保留额外的数据呢?

来自分类Dev

Fullcalendar和Bootstrap:回调适用于.modal(),但不适用于.dropdown('toggle')

来自分类Dev

Fullcalendar和Bootstrap:回调适用于.modal(),但不适用于.dropdown('toggle')

来自分类Dev

Bootstrap dropdown-toggle无法正常工作

来自分类Dev

Dropdown menu displayed on left of screen

来自分类Dev

Bootstrap dropdown menu text color

来自分类Dev

Twitter bootstrap v3 + dropdown:我需要听哪个元素类?

来自分类Dev

DropDown和TextBox逻辑

来自分类Dev

引导.dropdown-menu类的CSS样式无法与祖先/后代选择器一起使用

来自分类Dev

如何仅从Nuxt中的buefy导入Navbar,Dropdown和Modal?

Related 相关文章

  1. 1

    如何设计行为类似于根类的python类

  2. 2

    jQuery Toggle div和类

  3. 3

    如何在julia中创建行为类似于具有公共/私有字段和方法的标准Java类的“单一分发,面向对象的类”

  4. 4

    Jquery Select Dropdown 添加或删除类

  5. 5

    普通<select>元素与在移动设备上呈现的Bootstrap的dropdown元素

  6. 6

    普通<select>元素与在移动设备上呈现的Bootstrap的dropdown元素

  7. 7

    xdotool:如何通过标题和具有不同模式的类搜索窗口(类似于AutoHotkey)

  8. 8

    CSS Dropdown menu/container?

  9. 9

    如何定义和实现行为类似于dict构造函数/更新的函数

  10. 10

    jQuery toggle()添加和删除类

  11. 11

    Javascript Toggle类工作但类在下拉元素中无效

  12. 12

    类变量的行为类似于实例变量(Python 3.4)

  13. 13

    python类的行为类似于字典或列表数据

  14. 14

    如何使不是其抽象类的子类的接口实现者的行为类似于该接口的抽象类?

  15. 15

    如何使用 DropDown 加载和打开文件?

  16. 16

    为什么块元素的行为类似于内联元素?

  17. 17

    如何使classList.toggle跟随类的CSS

  18. 18

    如何制作行为类似于Session []集合的集合?C#

  19. 19

    无法重新定义BootStrap的dropdown-menu类的字体大小

  20. 20

    如何使用类似于float之类的内置方法和功能来建立一个类,但保留额外的数据呢?

  21. 21

    Fullcalendar和Bootstrap:回调适用于.modal(),但不适用于.dropdown('toggle')

  22. 22

    Fullcalendar和Bootstrap:回调适用于.modal(),但不适用于.dropdown('toggle')

  23. 23

    Bootstrap dropdown-toggle无法正常工作

  24. 24

    Dropdown menu displayed on left of screen

  25. 25

    Bootstrap dropdown menu text color

  26. 26

    Twitter bootstrap v3 + dropdown:我需要听哪个元素类?

  27. 27

    DropDown和TextBox逻辑

  28. 28

    引导.dropdown-menu类的CSS样式无法与祖先/后代选择器一起使用

  29. 29

    如何仅从Nuxt中的buefy导入Navbar,Dropdown和Modal?

热门标签

归档