bootstrap 联想下拉框

 <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">
                            模具编号
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select class="select2_group form-control" id="mouldCode" name="mouldCode">
                            </select>
                        </div>
                    </div>
     function getMouldList() {
	    $.ajax({
	        type: 'POST',
	        url: '/mouldInfo/listAllMouldCode',
	        success: function(data) {
	            var code3;
	            for (var a=0;a<data.length;a++) {
	
	                var dataContent = data[a];
	                if (dataContent == mouldCode) {
	
	                    code3 = code3 + '<option selected="selected">' + data[a] + '</option>'
	                }
	                if (dataContent != mouldCode) {
	
	                    code3 = code3 + '<option>' + data[a] + '</option>'
	                }
	            }
	            $('#mouldCode').empty().append(code3);
	        }
	
	    });
	}

 

  $(document).ready(function(){
    	 $(".select2_single").select2({
	          placeholder: "Select a state",
	          allowClear: true
	        });
	        $(".select2_group").select2({});
	        $(".select2_multiple").select2({
	          maximumSelectionLength: 4,
	          placeholder: "With Max Selection limit 4",
	          allowClear: true
	       });
	        getMouldList();
     });


 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
插件使用配置(config)还是很灵活的,当然也是弊端,配置不当,效果就没了。 使用时候,重要的参数如下(此demo参数配置点击右键看源码): url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1', queryName: 'q', //url?queryName=value,默认为输入框的name属性 jsonp: 'callback', //设置此参数名,将开启jsonp跨域功能(我要调淘宝数据,非跨域不可,淘宝的回调参数名就是callback),否则使用json数据结构 item: 'li', //下拉提示项目单位的选择器,默认一个li是一条提示,与processData写法相关。 processData: function(data){ }//自定义处理返回的数据,该方法可以return一个html字符串或jquery对象,将被写入到提示的下拉层中。 右键查看源码,将看到本demo所编写的processData函数是怎样的,所以这个参数是把如何表现交给你来做了,但别忘了配合 item 参数 getCurrItemValue: function($currItem){ }//定义如何去取得当前提示项目的值并返回值,插件根据此函数获取当前提示项目的值,并填入input中,此方法应根据processData参数来定义。 是的,如果你自定义了processData,这个参数恐怕也需要自定义,默认是获取$currItem.html(),你也可以return $currItem.attr('an attrName'); 右键查看源码,将看到本demo所编写的getCurrItemValue函数是怎样的 textchange: function($input){}, //不同于change事件在失去焦点触发,inchange依赖本插件,只要内容有变化,就会触发,并传入input对象 onselect: function($currItem){} //当选择了下拉的当前项目时执行,并传入当前项目。比如选择了某个提示项目,就提交表单。 sequential: 0, //按着方向键不动是否可以持续选择,默认不可以,设置值可以是任何等价的boolean
Bootstrap Table 是一个流行的开源插件,用于在网页中展示数据表格。要在 Bootstrap Table 中添加下拉框,可以使用自定义列的方式。 以下是一个简单的示例: 1. 首先,确保你已经引入了 BootstrapBootstrap Table 的相关文件。 2. 在 HTML 文件中创建一个表格,并为其添加一个 ID,例如: ```html <table id="myTable" data-toggle="table" data-height="300"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="dropdown" data-formatter="dropdownFormatter">Dropdown</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td></td> </tr> <tr> <td>2</td> <td>Jane</td> <td></td> </tr> </tbody> </table> ``` 3. 在 JavaScript 文件中定义 `dropdownFormatter` 函数,用于生成下拉框的 HTML 代码。例如: ```javascript function dropdownFormatter(value, row, index) { var options = ['Option 1', 'Option 2', 'Option 3']; // 下拉框选项 var html = '<select class="form-control">'; for (var i = 0; i < options.length; i++) { html += '<option>' + options[i] + '</option>'; } html += '</select>'; return html; } ``` 4. 初始化 Bootstrap Table,并指定 `dropdownFormatter` 函数作为下拉框列的自定义格式化器。例如: ```javascript $(function() { $('#myTable').bootstrapTable({ columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'dropdown', title: 'Dropdown', formatter: dropdownFormatter }] }); }); ``` 这样,你就可以在 Bootstrap Table 中的某一列中添加下拉框了。根据你的需求,可以自定义下拉框的选项、样式等。希望对你有所帮助!如果有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值