杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

bootstrap下拉搜索框

Young小杰2018-5-10 14:34 网站搭建(1)3338查询中……小标签: 网站搭建 源码分享

因为最近在写工具箱,所以研究了几种搜索功能,找到这款bootstrap下拉搜索还不错,所以分享给大家


<!DOCTYPE html>
<html>
<head>
	<title>bootstrap下拉搜索demo</title>
</head>
<body>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
	
	<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
	

	<select id="basic" class="selectpicker" data-live-search="true">
		<option data-subtext="1">1</option>
		<option data-subtext="2">2</option>
		<option data-subtext="3">3</option>
		<option data-subtext="这是测试">这是测试</option>
		<option data-subtext="zscs">zscs</option>
	</select>

	<script type="text/javascript">
		$('.selectpicker').on('changed.bs.select',function(e){
			//返回选中内容
			alert($('#basic').val());
		});
	</script>
</body>
</html>

360截图-22368328.jpg

本文最后更新于2018-5-10,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • 腾讯QQ Lv 1

    小杰的博客总是让人那么喜欢,特别是我们这些爱折腾代码的人

  • 手机扫描二维码
    阅读体验更佳