首页 前端知识 jQuery Editable Select可搜索下拉选项框

jQuery Editable Select可搜索下拉选项框

2024-08-18 22:08:01 前端知识 前端哥 706 521 我要收藏

前言

可搜索的下拉选项框

源码地址:https://github.com/indrimuska/jquery-editable-select

可搜索的下拉选项框

引入依赖

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">

基本使用

<select id="editable-select">
	<option>Alfa Romeo</option>
	<option>Audi</option>
	<option>BMW</option>
	<option>Citroen</option>
</select>

<script type="text/javascript">
    $('#editable-select').editableSelect();
</script>

在这里插入图片描述

有选中项的select

<select id="editable-select">
	<option>Alfa Romeo</option>
	<option selected>Audi</option>
	<option>BMW</option>
	<option>Citroen</option>
</select>

<script type="text/javascript">
    $('#editable-select').editableSelect();
</script>

在这里插入图片描述

option中带有标签

<select id="editable-select">
	<option>Alfa Romeo - &lt;small&gt;&lt;a href="http://www.alfaromeo.com/"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
	<option>Audi - &lt;small&gt;&lt;a href="http://www.audi.com/"&gt;www.audi.com&lt;/a&gt;&lt;/small&gt;</option>
	<option>BMW - &lt;small&gt;&lt;a href="http://www.bmw.com/"&gt;www.bmw.com&lt;/a&gt;&lt;/small&gt;</option>
	<option>Citroen - &lt;small&gt;&lt;a href="http://www.citroen.com/"&gt;www.citroen.com&lt;/a&gt;&lt;/small&gt;</option>

<script type="text/javascript">
    $('#editable-select').editableSelect();
</script>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16057.html
标签
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!