扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
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
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
您可以使用该事件:
在这个事件中添加placeholder属性就足够了:
我有同样的需求,最终为
Select2
插件编写了一个小扩展。插件有一个新选项
searchInputPlaceholder
,用于为“搜索”输入字段设置占位符。在插件的 js 文件后面添加以下代码:
用法:
使用
searchInputPlaceholder
选项初始化 select2 插件:演示:
演示可在 JsFiddle 上找到。
2020 年 5 月 9 日更新
使用最新的 Select2 版本 (v4.0.13) 进行测试 - JsFiddle。
Github 存储库:
https://github.com/andreivictor/select2-searchInputPlaceholder