37 bootstrap——小例子：下拉框

swiftwwj 2020-02-09

效果先看

37 bootstrap——小例子：下拉框

知识点

bootstrap下拉框由div>button ul>li>a 构成

div的类为：dropdown

a标签必须写

button的类为： dropdown-toggle 必带属性：data-toggle="dropdown"

ul的类为：dropdown-menu

获取事件触发的对象为：event.target

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉框</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		
		<div id="" class="dropdown">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">切换</button>
			<ul class="dropdown-menu">
				<li><a href="javascrip:void(0)">嘻嘻</a></li>
				<li><a href="javascrip:void(0)">哈哈</a></li>
				<li><a href="javascrip:void(0)">吼吼</a></li>
			</ul>
		</div>
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var btn = $(".dropdown-toggle");
			var ul = $(".dropdown-menu");
			ul.click(function(){
				btn.html(event.target.innerHTML);
			})
		</script>
	</body>
</html>

swiftwwj

swiftwwj

相关推荐

Redis实例1：获取下拉框数据

第一次需要从数据库获得数据，第二次直接从redis中获取。通常用在缓存不常变化的数据。//[{"id":1,"name":"北京"},{"id":2,"name&qu

hwm / 0评论 2020-06-17

element -ui select下拉框label显示多个值

placeholder="请选择优惠券类型"

sixthelement / 0评论 2020-06-16

html实现下拉框、switch开关、复选框效果

width: 90px;margin: 50px;width: 90px;background-color: #17a6b5;height: 40px;cursor: pointer;display: flex;justify-content: cente

haocxy / 0评论 2020-06-09

bootstrap导航栏(navbar)下拉框无法展开

3、jquery的引用顺序要在bootstrap之前

tthappyer / 0评论 2020-05-17

selenium——下拉框

# 方式一：通过索引进行选择

xiangxiaojun / 0评论 2020-05-17

selenium - webdriver 下拉框处理select

针对<select>标签，可使用如下方法：。select_by_index() 通过下拉选项的索引定位，从0开始。百度搜索下拉框，如下：。分别选择每页显示20条，10条，50条：。Select.select_by_value # 选择下

Reiki / 0评论 2020-04-15

2020/4/10安卓开发：Spinner下拉框

<string-array name="spinner_string"> <item>赵丽颖</item> <item>迪丽热巴</item> <ite

绿豆饼 / 0评论 2020-04-10

css布局及鼠标悬浮下拉框展现

<span class="span-left"> 信息。。。。。。。。。<span class="span-right"><span>评论|</span><spa

木四小哥 / 0评论 2013-05-14

js动态获取下拉框的数据（搜索条件之间互相影响）

那么该如何实现呢？逻辑是共有三个下拉框，分别是组织机构，问卷名称，问题选择。

xx0cw / 0评论 2020-01-12

JQUERY制作简洁的多级联动SELECT下拉框

今天我们要来分享一款很实用的jQuery插件，它是一个基于jQuery多级联动的省市地区Select下拉框，并且值得一提的是，这款联动下拉框是经过自定义美化过的，外观比浏览器自带的要漂亮许多。另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项

81463166 / 0评论 2019-12-26

下拉框移动 jquery

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title

80437916 / 0评论 2019-12-22

Python自动化之下拉框，隐藏标签定位 代码&amp;报错解决

2）若还是无法定位，请查看前后是否有sleep等待；xpath定位效率会低点。若是操作隐藏的元素的话：style="display: none;"；[0] 指定这一组标签里的第几个。style.display="block&q

文山羊 / 0评论 2019-12-14

jQuery_完成省市二级联动

当填表的时候会让你设计某省某市怎么设计，应该明白，如果你选择了一个确定的省，那么在第二个下拉框内则不会有除了你选择的省的市之外的名称。而这功能用js来实现很麻烦，但是用jq确很容易实现。$.change(function() {//change时间，表示下

小仙儿 / 0评论 2019-11-30

JQuery美化下拉框插件

body{font: 12px/1.231 "微软雅黑",Verdana,"宋体",sans-serif; }. .ui-select .default label{ font-size:10px; padding-

84403067 / 0评论 2014-01-19

09 下拉框 数据验证

对输入的数据进行验证，不符合会报错。其它的条件不一一举例

Norsaa / 0评论 2019-11-10

微信小程序select下拉框实现

小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉，这里为了更清楚的显示小程序层级就把源码直接复制过来了。<image style=‘height:20rpx;width:20rpx;‘ src=‘/images/down.pn

戴翔的技术 / 0评论 2019-11-07

jQuery.getJSON()方法调用Servlet的List数据，然后填充到下拉框

在aJax处理中前后台数据交互用的比较多是就是JSON数据格式和xml格式，如果你用到Jquery，你会发现Jquery强大的选择器功能。在处理这样的问题是，今天分享一下我用jquery出来c#中webservice中的出了json和xml数据的方法；

chinewwen / 0评论 2011-08-07

JQuery 对 Select option 的操作

var selectText = $.find.text(); //数据字典文字的值。var selectValue = $.val(); //数据字典数字的值

donghongbz / 0评论 2019-11-05

正则表达式和辅助特效

1,1普通形式; 语法。var reg = / 表达式 / 附加参数。普通参数必须是一个常量的,构造参数可以是一个变量的。2,1简单模式:普通字符组成的表达模式。1, 下拉款实现级联效果。javaScript也拥有面向对象语言的,标签也可以是一个对象。se

一只懒虫 / 0评论 2014-11-11

jsonp实现百度下拉框功能的方法分析

本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下：。思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容。

duxd / 0评论 2019-05-10

利用Bootstrap Multiselect实现下拉框多选功能

利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值。插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件。

骆驼的自白 / 0评论 2019-04-08

Vue项目中使用jquery的简单方法

在vue项目中，需要实现某些特定的功能时，使用mvvm模式不易实现。因此引入jquery包来完成需求。jquery中的触发事件可以自己定义在mounted中，如果需要使用vue中data的数据，直接使用this.msg是无法使用的，需要另外定义const

85473768 / 0评论 2019-05-16

为什么大部分关于可用性的争论都是在浪费时间

可用性测试将个人喜好转移到什么有效，什么无效，什么更能实现产品目的，什么更能满足用户需求上，更容易打破僵局。而且可用性测试会让我们看到用户的动机、理解、反应的差距，从而让我们不会继续执着于我们对产品可用性的执念。并不是说公司大才做可用性测试，而是在一个产品

Testingba工作室 / 0评论 2016-03-17

selenuim-下拉框（单选）-python

Select.select_by_value("1")ps：如果选项值不是固定的，直接将固定值替换成变量即可

typhoonpython / 0评论 2019-06-29

JQuery的一些方法

如果需要将jQuery对象转换成html元素, 则只需要取其第0个元素即可. 例如$返回的是jQuery对象, 而$[0]返回的就是html元素。如果选择带有class=”TextBox”的div元素, 那么这么写: $. 选择带有myattr属性的元素$

86463967 / 0评论 2014-08-19

输入框显示不全解决方案

div.style.cssText = 'border-radius:5px;width:' + width + 'px;font-size:12px;border:1px solid #000;position:absolute;background:#

ndscoylx / 0评论 2017-10-17

js&jquery对比

//对于文本框等有value属性的可以使用上面的方法，没有value属性的可以使用下面的。a对象.appendChildTo(b对象) 将a添加到b . var select = $.appendTo;//在body里面创建一个下拉框。v

81497307 / 0评论 2017-06-20

jQuery自定义漂亮的下拉框插件8种效果

jquery美化选择器实例有：边框、下划线、伸缩、滑动、覆盖、旋转、弹出层选择、环形效果。<h1> 自定义选择元素</h1>. <a href="index7.html">弹出层选择</a>

Ardencyz / 0评论 2016-11-14

二级联动AJAX

点击表单中第一个下拉框，动态替换第二个下拉框。点击第一个下拉框后触发一个AJAX，从后台获取一个json，内容如List<object>.

WillZhang / 0评论 2016-11-02

jquery autocomplete设置下拉框高度

在jQuery autocomplte.css或项目自定义的css中加入以下css样式：。overflow-y: auto; //超过高度出现滚动条。overflow-x: hidden; //横向超出隐藏，如果要出现横向滚动，设置为auto即可

85403969 / 0评论 2016-10-25

功能:H5可根据输入的匹配相对应的文字下拉框

<inputtype="text"autocomplete="on"name="demoAutoComplete"list="autoNames"class="

yongquanx / 0评论 2016-08-29

动态加载select标签下拉框数据

Iterator<Operator> itOperator = operators.iterator();String operatorIdString = "";Operator op = itOperator.next(

wndong / 0评论 2016-08-03

选择控件：select ，radio，checkbox之用jquery获取选中值的小结

最近是因为用到了checkbox ，需要用jquery获取多选框的选择值。虽然简单，但其实自己还是花了一小点时间的（因为不太熟……顺便捎上了select下拉框，radio单选按钮。下面用小的示例整理下如何获取这些选择控件所选中的值。var index =

89453862 / 0评论 2015-10-10

jquery多选下拉框左右复制

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Untitled</titl

ndscoylx / 0评论 2015-06-22

【Jquery插件】下拉框三级联动选择 省市区三级联动选择

省市区三级联动选择, 在我们开发中很常见, 下一级的下拉框数据与上一级的下拉框的值紧密相关, 所以需要我们处理的时候格外小心, 及时清理数据, 异步加载数据时再去绑定值不容半点马虎.我今天给大家分享一个比较通用的Js插件, 虽然叫JQuery插件, 但也只

83493467 / 0评论 2015-05-28

jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. e.stopPropagation();$(&quo

83510998 / 0评论 2015-05-19

jQuery Chosen Plugin

jQuery Chosen Plugin 是一个 jQuery 插件，用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索，多个标签编辑等功能。

hackcat / 0评论 2015-04-30

jquery 动态添加下拉框选项

$('#del_type').bind("change", function(){ if($("#del_type").find("option").length>2){ $("#

海欣海夜 / 0评论 2015-04-02

用 :focus-within 实现纯 CSS 下拉框组件

当点击表单中的文本框时需高亮整个表单元素。但是表单内部的文本框获得焦点并不代表表单元素本身有焦点，所以使用 form:focus 并不能生效，这时就可以使用 :focus-within. 由于在 body 上绑定了事件，在下拉框关闭时也会触发，造成不必要的

jianqi / 0评论 2019-06-27

Jquery主要控件的取值、赋值，包括textbox,button,lable,radio,checkbox,selected

var item = $.val();//若未被选中 则val() = undefined

PHP淮北PHP00网 / 0评论 2015-03-31

easyui combobox 点击下拉框才加载数据

用onshowpanel 事件，页面和js 不要加url属性；url属性事件触发时赋值。

ningwentao / 0评论 2014-12-05

easyui 图标下拉框

.item-img{display:inline-block;vertical-align:middle;width:16px;height:16px;cursor: pointer;}.item-text{display:inline-block;ver

johncena / 0评论 2014-12-05

方便维护下拉框数据的UI设计

$problemArr=array_unique;2 前台页面显示的效果如下

弱思 / 0评论 2014-12-04

正则表达式和辅助特效

1,1普通形式; 语法。var reg = / 表达式 / 附加参数 表达:需要匹配的。m:代表可以进行多行匹配 1,2构造函数形式。普通参数必须是一个常量的,构造参数可以是一个变量的。var reg =/chang/; 简单模式只能进行具体的匹配。

QWEZXCV / 0评论 2014-11-11

实现多个系统的模拟登录

公司内部要用几个内部系统，由于几个系统经常登录比较繁琐。所以需要统一登录认证的功能。回去一查 现在比较通用的方法为单点登录，但这个需要一个公共的认证服务，每个子系统还要有一个client端服务。由于其他系统是别的公司 不同语言开发的 ，不能让人家写clie

zhangpeng / 0评论 2014-11-01

关于使用element中的popup问题

写完上篇看了几集新番就空虚了。。零点时分决定爬起来，趁着清明假期能写多写点。

lzxy / 0评论 2019-06-27

利用jQuery来简化radio，checkbox，select，radio表单元素的操作

获取一组radio被选中项的值var item = $.val();获取select被选中项的文本var item = $.text();select下拉框的第二个元素为当前选中值$[0].selectedIndex = 1;radio单选组的第二个元素为

82483564 / 0评论 2014-08-28

利用百度地图开源数据构建省市区三级联动下拉框

利用百度地图提供的开源数据，来定制自己的省市区3级联动下拉框。数据准确，更好地和百度地图等应用结合。详情见附件内容！

geminihr / 0评论 2014-08-04

ajax 联动下拉框

ajax 如何发送数据？='0') { var speciality = document.getElementById; speciality.disabled=false; var url="college.do?"); } }}

风花雪月 / 0评论 2014-05-19