bootstrap select2 动态改变值

1,selec2动态赋值

var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" });

$("#e_pid").attr("value", tempP);
                            $("#e_pid").select2({
                                placeholder: "查找停车场名称(多选)",
                                language: "zh-CN",
                                minimumInputLength: 1,
                                allowClear: true,
                                multiple: true,
                                ajax: {
                                    // instead of writing the function to execute the request we use Select2's convenient helper
                                    url: "/manage/park/index/json/index",
                                    dataType: 'json',
                                    data: function (term, page) {


                                        return {
                                            parkName: term,// search term
                                            powerpid: "1"
                                        };
                                    },
                                    results: function (data, page) { // parse the results into the format expected by Select2.
                                        // since we are using custom formatting functions we do not need to alter remote JSON data
                                        for (var i = 0; i < data.length; i++) {
                                            data[i].id = data[i].id+"|"+data[i].name;
                                        };
                                        data.push({ id: "577cb125f8d2c404572413d1|无", name: "无" });
                                        return {
                                            results: data
                                        };
                                    }
                                },
                                initSelection: function (element, callback) {

//赋初始值
                                    // the input tag has a value attribute preloaded that points to a preselected movie's id
                                    // this function resolves that id attribute to an object that select2 can render
                                    // using its formatResult renderer - that way the movie name is shown preselected
                                    var data = [];
                                    var value = ""
                                    var str = $(element).val().split('^');
                                    for (var i = 0; i < str.length; i++) {
                                        var temp = JSON.parse(str[i]);
                                        value += temp.id + ",";
                                        data.push(temp);
                                    }
                                    ;
                                    value = value.substring(0, value.length - 1);
                                    $(element).val(value);
                                    callback(data);
                                },
                                formatSelection: function (item) {
                                    return item.name;//注意此处的name,要和ajax返回数组的键值一样
                                }, // 选择结果中的显示
                                formatResult: function (item) {
                                    return item.name;//注意此处的name
                                },// 搜索列表中的显示
                                dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
                                escapeMarkup: function (m) {
                                    return m;
                                }
                            });

2,动态改变值

                                                    $("#e_pid").attr("value", temp);
                                                    $("#e_pid").trigger('change'); //动态改变值以后必须触发改变时间。否则将不会生效

您好!对于Bootstrap-select.js分组联动的实现,您可以按照以下步骤进行操作: 1. 引入必要的依赖文件:在HTML文件中引入Bootstrap-select.js和Bootstrap-select.css文件。 ```html <link rel="stylesheet" href="path/to/bootstrap-select.css"> <script src="path/to/bootstrap-select.js"></script> ``` 2. 创建下拉菜单的HTML结构:使用`<select>`元素创建下拉菜单,并为其添加`data-live-search="true"`和`data-size="5"`属性,以启用搜索和设置可见选项的数量。 ```html <select class="selectpicker" data-live-search="true" data-size="5"> <option value="">请选择</option> <optgroup label="分组1"> <option value="1">选项1</option> <option value="2">选项2</option> </optgroup> <optgroup label="分组2"> <option value="3">选项3</option> <option value="4">选项4</option> </optgroup> </select> ``` 3. 初始化插件:在页面加载完成后,通过JavaScript代码初始化Bootstrap-select插件。 ```javascript $(document).ready(function() { $('.selectpicker').selectpicker(); }); ``` 4. 实现分组联动效果:根据您的需求,您可以使用JavaScript代码来实现下拉菜单的分组联动效果。例如,当选择某个选项时,根据该选项的动态改变其他下拉菜单的选项。 ```javascript $('.selectpicker').on('changed.bs.select', function(e) { var selectedValue = $(this).val(); // 根据选中的进行相应的处理 }); ``` 这样,您就可以使用Bootstrap-select.js实现分组联动的下拉菜单了。记得根据您的实际需求进行相应的调整和处理。希望对您有帮助!如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值