84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
如何为 select2 jQuery 插件制作占位符。在 StackOverflow 上有很多答案如何在那里制作占位符,但它们是关于元素的占位符的。我需要为搜索框指定一个占位符,请参见图片。
您可以使用该事件:
在这个事件中添加placeholder属性就足够了:
$(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', 'My Placeholder')
$('select').select2({ placeholder: 'Select an option' }).on('select2:opening', function(e) { $(this).data('select2').$dropdown.find(':input.select2-search__field').attr('placeholder', 'My Placeholder') })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select style="width: 100%;"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
我有同样的需求,最终为 Select2 插件编写了一个小扩展。
Select2
插件有一个新选项searchInputPlaceholder,用于为“搜索”输入字段设置占位符。
searchInputPlaceholder
在插件的 js 文件后面添加以下代码:
(function($) { var Defaults = $.fn.select2.amd.require('select2/defaults'); $.extend(Defaults.defaults, { searchInputPlaceholder: '' }); var SearchDropdown = $.fn.select2.amd.require('select2/dropdown/search'); var _renderSearchDropdown = SearchDropdown.prototype.render; SearchDropdown.prototype.render = function(decorated) { // invoke parent method var $rendered = _renderSearchDropdown.apply(this, Array.prototype.slice.apply(arguments)); this.$search.attr('placeholder', this.options.get('searchInputPlaceholder')); return $rendered; }; })(window.jQuery);
用法:
使用 searchInputPlaceholder 选项初始化 select2 插件:
$("select").select2({ // options searchInputPlaceholder: 'My custom placeholder...' });
演示:
演示可在 JsFiddle 上找到。
2020 年 5 月 9 日更新
使用最新的 Select2 版本 (v4.0.13) 进行测试 - JsFiddle。
Github 存储库:
https://github.com/andreivictor/select2-searchInputPlaceholder
您可以使用该事件:
在这个事件中添加placeholder属性就足够了:
我有同样的需求,最终为
Select2
插件编写了一个小扩展。插件有一个新选项
searchInputPlaceholder
,用于为“搜索”输入字段设置占位符。在插件的 js 文件后面添加以下代码:
用法:
使用
searchInputPlaceholder
选项初始化 select2 插件:演示:
演示可在 JsFiddle 上找到。
2020 年 5 月 9 日更新
使用最新的 Select2 版本 (v4.0.13) 进行测试 - JsFiddle。
Github 存储库:
https://github.com/andreivictor/select2-searchInputPlaceholder