Bootstrap 在下拉选择中添加过滤器

软件技术 前端
1

程序运行效果图：

947×721 31.7 KB

在线源代码：http://src.ossez.com/filedetails.php?repname=p&path=%2Fbootstrap%2Ftrunk%2Fexamples%2FBootstrapFormHelpers%2Fdemo%2Fselect-box-with-a-filter%2Fselect-box-with-a-filter.html

这里你需要载入 3 个 JS 和 2 个 CSS，可以在源代码中中找到路径。

源代码可以参考如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OSSEZ Bootstrap 在下拉选择中添加过滤器Simple example for adding a select box with a filter</title>
<link href="../../css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../css/bootstrap-formhelpers.css" rel="stylesheet" type="text/css" />


</head>
<body>

	<div class="bfh-selectbox">
		<input type="hidden" name="selectbox3" value=""> <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"> <span
			class="bfh-selectbox-option input-medium" data-option="12">Option 12</span> <b class="caret"></b>
		</a>
		<div class="bfh-selectbox-options">
			<input type="text" class="bfh-selectbox-filter">
			<div role="listbox">
				<ul role="option">
					<li onclick="window.open('http://www.isharkfly.com')"><a tabindex="-1" href="#" data-option="1">www.isharkfly.com</a></li>
					<li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
					<li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
					<li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
					<li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
					<li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
					<li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
					<li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
					<li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
					<li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
					<li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
					<li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
					<li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
					<li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
					<li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
				</ul>
			</div>
		</div>
	</div>


	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/bootstrap-dropdown.js"></script>
	<script type="text/javascript" src="../../js/bootstrap-formhelpers-selectbox.js"></script>


</body>
</html>