select2

Binding select2 with knockout

由 孤者浪人 提交于 2019-11-28 11:27:28
I'm new to knockout and trying to get my select2 to play nicely with my knockout bindings. All I want to do is bind accounts array to my select2 (this works) and then have the initial value set when the binding occurs. I for some reason can not get this to work. Also noticed that the init and update function get called initially, but anytime I change the value of the select2 dropdown, the update function is not being triggered. Any help would be appreciated. HTML <div class="col-sm-12 col-md-3"> <fieldset class="form-group"> <label data-bind="attr:{for:'job'+laborDetailId()}">Job</label>

Capture events of underlying element in component

由 心已入冬 提交于 2019-11-28 10:19:31
问题 Trying to use this component. <select2 v-model="value" :options="options" @change="onChange()"></select2> The @change callback is not getting called. I know that I can use watch: { value: function () { ... } but, is there a way to capture underlying tag events? 回答1: In the current version, select2 component does not handle on-change function. For this, you have to modify the select2 component, you have to add one more prop: onChange and inside component execute the function passed in this

select2

由 ╄→尐↘猪︶ㄣ 提交于 2019-11-28 07:30:19
$('#keywords').select2({ placeholder: '--请选择--', ajax: { url: '/QuotaManage/QuotaEnterpriseRepository/GetEnterpriseList', //{ # ajax后台函数路径 # } dataType: "json", 　　　//{ # 传输的数据类型，一般使用json或jsonp，jsonp比较复杂，需要APIKEY，暂时没进行研究 # } type: "post", 　　　　　　//{ # GET即为前台JS向后台函数取数据，POST反之 # } quietMillis: 1000, //{ # 延时查询毫秒数 # } data: function (term, page) { return { keywords: term.term, //{ # term为前台输入的查询关键字，保存到sSearch对象，即后台保存关键字的对象 # } _search: false, nd: 1542272397206, rows: 10,//{ # 每次查询的结果数 # } page: currentPage, sidx: 'CreateDate', sord: 'desc' }; }, processResults: function (data) { var obj = data

How to automatically increase the height of select2 input box (multiple)

由 ぐ巨炮叔叔 提交于 2019-11-28 05:30:20
问题 I have a select2 input box for multiselet option in which, user can select as many options as he wants, if the selected options are occupying more space than available width then I wanted to increase the height of the select box automatically (don't want scroll option, all options should be in viewable space) and get the remaining options in next line. Currently options are coming in the next line but the height of the select box is not increased. If I remove the height property in the

Select2 Default values for multiple select and allowed tags

由 倾然丶 夕夏残阳落幕 提交于 2019-11-27 18:07:17
问题 I have a select 2 multi-select option <select multiple name="event_type[]" class="form-control" id="selectEvents"> @foreach ($eTypes as $type) <option>{{$type}}</option> @endforeach </select> I want to set some default values just in case the user is editing the form. I have successfully done that by doing this var s2 = $("#selectEvents").select2({ placeholder: "Choose event type", tags: true }); s2.val(["Trade Fair", "CA", "Party"]).trigger("change"); //CA doesn't show as a default But the

How can I using select2 with webpack?

由 强颜欢笑 提交于 2019-11-27 13:49:40
问题 I'm using webpack to manage all my assets, when I use this code to require select2 (https://github.com/select2/select2) I got the error $(...).select2 is not function. require.ensure(['./vendors/select2'],function (require) { require('./site'); }); // site.js (function ($) { $(document).ready(function () { $(".js-1example-basic-single").select2(); }); })(jQuery); I think there is something wrong with module export. I tried many search but no hope. Anyone please tell me what to do, It took me

使用 Select2 下拉框实现复选

由 坚强是说给别人听的谎言 提交于 2019-11-27 11:10:45
使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery And Select2 Demo</title> <link href="./fSelect.css" rel="stylesheet" type="text/css"> </head> <body style=""> <select class="demo hidden" multiple="multiple" id="all"> <option value="1">苹果</option> <option value="2">菠萝</option> <option value="3">蜜桃</option> <option value="4">香蕉</option> <option value="5">桃子</option> <option value="6"

Binding select2 with knockout

由 岁酱吖の 提交于 2019-11-27 06:11:05
问题 I'm new to knockout and trying to get my select2 to play nicely with my knockout bindings. All I want to do is bind accounts array to my select2 (this works) and then have the initial value set when the binding occurs. I for some reason can not get this to work. Also noticed that the init and update function get called initially, but anytime I change the value of the select2 dropdown, the update function is not being triggered. Any help would be appreciated. HTML <div class="col-sm-12 col-md

非常实用的select下拉框-Select2.js

由 孤人 提交于 2019-11-27 02:42:11
在 Web开发 中，Select下拉框是常用的输入组件。由于原生的Select几乎很难通过 CSS样式 控制。一些好看的Select下拉框就只能通过模拟来实现。 PHP程序员雷雪松 给大家推荐一筐款不错的Select下拉框插件：Select2。Select2可以支持搜索、标签、远程数据、无限滚动、和许多其他非常优秀的选项，Select2还可以非常方便的自定义样式，基本可以实现所有的Select效果。下面 PHP程序员雷雪松 就详细的讲解一下Select2.js的用法。 1、引入select2.js和select2.css <link href="./select2.min.css" rel="stylesheet" /> <script src="./jquery.min.js"></script> <script src="./select2.min.js"></script> 2、Select2基础用法 <select class="js-select2" name="job"> <option value="phper">PHP程序员</option> <option value="web">web前端</option> </select> $(document).ready(function() { $('.js-select2').select2(); });

select2下拉框在modal弹框下输入框不显示，官方解决办法：设置dropdownParent。

由 ￣綄美尐妖づ 提交于 2019-11-26 13:17:40
采用select2控件，在bootstrap的modal弹框中，会出现下拉框中没有输入框。网上走一圈，基本上解决办法都是2个，但我要说的是： 这2个方法都不是最好的 。 因为官方就有解决方案，而且非常简单 。网上的常用2个解决方案： 1、检查modal模态窗口中的div中是否有tabindex=”-1”，有则删除tabindex=”-1”； 2、在JS文件中全局加上：$.fn.modal.Constructor.prototype.enforceFocus = function () {}; 这2个方法，我都试验了，也没效果。去官网看看。 官网地址贴一下： https://select2.org/dropdown#dropdown-placement 官网说明截图如下： 看到没有？官方说了：当你在模态对话框或者小容器中渲染select2时，这是非常有用的。如果你在bootstrap的modal对话框中使用搜索框时出现麻烦，可以尝试设置dropdownParent选项，去关联一个模态元素。 具体怎么做？ 非常简单，在select下面建一个div，赋值一个id，然后select2在渲染时，设置dropdownParent的值为这个div的id。意思就是说，搜索框渲染时绑定到这个id的div。由于这个div与弹框是在一个层上，所以就能正常显示了。这远远要比删除tabIndex
订阅 select2