Bootstrap Multiselect 设置 option
$.ajax({
type: 'post',
url: "helper/ajax_search.php",
data: {models: decodeURIComponent(brands)},
dataType: 'json',
success: function(data) {
$('select.multiselect').empty();
$('select.multiselect').append(
$('<option></option>')
.text('alle')
.val('alle')
);
$.each(data, function(index, html) {
$('select.multiselect').append(
$('<option></option>')
.text(html.name)
.val(html.name)
);
});
$('.multiselect').multiselect('rebuild')
},
error: function(error) {
console.log("Error:");
console.log(error);
}
});
<extend name="Public/base" />
<block name='style'>
<style type="text/css">
.sctext{ width:700px; height: 300px;}
</style>
</block>
<block name="body">
<div class="main-title cf">
<h2>渠道授权页面</h2>
</div>
<br/>
<!-- 表单 -->
<form id="form" action="{:U('/Admin/System/User/userChannelAuth')}" method="post" class="form-horizontal">
<input id="user_id" name="user_id" type="hidden" value="{$_GET['id']}">
<input id="user_name" name="user_name" type="hidden" value="{$_GET['name']}">
<div class="form-item">
<label class="item-label">平台类型<span class="check-tips">(请勾选平台类型)</span></label>
<div>
<select id="platform_type" name="platform_type[]" multiple="multiple">
<volist name="platform_type" id="vo">
<in name="vo.type_id" value="$platform_type_id">
<option value="{$vo.type_id}" class="row-select" selected="selected">{$vo.type_name}</option>
<else/>
<option value="{$vo.type_id}" class="row-select" >{$vo.type_name}</option>
</in>
</volist>
</select>
</div>
</div>
<br/>
<div class="form-item">
<label class="item-label">渠道<span class="check-tips">(请勾选渠道)</span></label>
<div>
<select id="channel" name="channel[]" multiple="multiple">
<volist name="ChannelInfo_data" id="vo">
<in name="vo.id" value="$channel_id">
<option value="{$vo.id}" class="row-select" selected="selected">{$vo.cn_name}</option>
<else/>
<option value="{$vo.id}" class="row-select" >{$vo.cn_name}</option>
</in>
</volist>
</select>
</div>
</div>
<br/>
<div class="form-item">
<label class="item-label">授权用户:{$_GET["name"]}<span class="check-tips"></span></label>
</div>
<br/>
<div class="form-item">
<button type="submit" class="btns submit-btn ajax-post" target-form="form-horizontal">授 权</button>
</div>
</form>
</block>
<block name="script">
<script type="text/javascript" charset="utf-8">
//导航高亮
highlight_subnav('{:U('/Admin/System/User/index')}');
highlight_subnav('{:U('saveServer')}');
Think.setValue('lua','{:I('lua')}');
$('#platform_type').multiselect(
{
enableFiltering: true,
nonSelectedText:'请选择平台类型',
filterPlaceholder:'搜索',
nSelectedText:'项被选中',
includeSelectAllOption:true,
selectAllText:'全选/取消全选',
allSelectedText:'已选中所有平台类型',
maxHeight:300
});
$('#channel').multiselect(
{
enableFiltering: true,
nonSelectedText:'请选择渠道',
filterPlaceholder:'搜索',
nSelectedText:'项被选中',
includeSelectAllOption:true,
selectAllText:'全选/取消全选',
allSelectedText:'已选中所有渠道',
maxHeight:300
});
$("#platform_type").bind("click",function(){
$("#channel option[value]").remove();
});
$("#platform_type").bind("change",function(){
var platform_type_ids=$("#platform_type").val();//获取所有的平台类型
if(platform_type_ids!=null){
var ulr='{:U('/Admin/System/User/getChannel')}';
$.ajax({
type:"GET",
url:ulr,
data:{ids:platform_type_ids},
dataType:"json",
success:function(data){
$("#channel option[value]").remove();
$(data).each(function(k,v){
$('#channel').append(
//selected="selected"
$('<option ></option>').text(v["cn_name"]).val(v["id"])
);
});
$('#channel').multiselect('rebuild');
$("#channel").multiselect( 'refresh' );
}
});
}else{
$('#channel').multiselect('destroy');
$('#channel').empty();
$('#channel').multiselect({
enableCaseInsensitiveFiltering : true,
nonSelectedText:'请选择渠道',
maxHeight:300
});
}
});
</script>
</block>
Bootstrap Multiselect 设置 option的更多相关文章
- web 前端常用组件【03】Bootstrap Multiselect
实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...
- JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
- bootstrap multiselect两大组件
组件说明以及API 1.第一个组件——multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它选中的效果不太好.关于它的效果展示,我们放在后面. 2.第二个组件——bootstr ...
- Bootstrap Multiselect插件使用步骤以及常见参数配置介绍
Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选.它应用的主要步骤如下: 一,引入需要的相关js和css文件 既然是Bootstrap插件, ...
- Bootstrap Multiselect
Getting Started Link the Required Files First, the jQuery library needs to be included. Then Twitter ...
- 使用BootStrap框架设置全局CSS样式
一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
- easyui-combobox 设置option内容不换行
使用easyui 1.4.4 1 2 3 4 5 6 7 8 <select id="hotalid" class="easyui-combobox" d ...
- Django实战(5):引入bootstrap,设置静态资源
之前生成了Product类的scaffold,但是如同rails的开发者David所讲的那样,scaffold几乎没什么用.所以按照<Agile Web Development with Rai ...
- js 动态设置 option 的selected 选项
思路:通过for循环判断每个选项,一旦满足条件则设置其selected属性为true即可,关键代码: var obj = document.getElementById(select_id); for ...
随机推荐
- 能显示git分支的终端提示配置
之前都是跟随潮流,安装zsh然后oh-my-zsh,选一个看起来顺眼的主题,一通瞎配置,很酷炫. 可是即使只有一个git插件,oh-my-zsh每次启动的时候都很慢,起码有好几秒,而且有时候zsh还会 ...
- nginx安装第三方模块的方法
nginx第三方模块安装方法: ./configure --prefix=/你的安装目录 --add-module=/第三方模块目录 以安装fair模块实例 下载fair安装包并解压 1.在未安装ng ...
- 求x>0时,y=x^3-6x^2+15的极值
解: 当x→∞时,y也→∞,所以y没有最大值. y=x3-6x2+15=-4*(x/2)*(x/2)*(6-x)+15 而根据几何平均数小于等于算术平均数的定理,(x/2)*(x/2)*(6-x)在x ...
- OpenCV 之 霍夫变换
Hough 变换,对图像中直线的残缺部分.噪声.以及其它的共存结构不敏感,因此,具有很强的鲁棒性. 它常用来检测 直线和曲线 (圆形),识别图像中的几何形状,甚至可用来分割重叠或有部分遮挡的物体. 1 ...
- Solidworks的Toolbox拖出来的零件另存也没用,重新打开之后被自动替换怎么办
工具-选项-系统选项-异型孔向导,取消勾选"将此文件夹设为Toolbox零部件的默认搜索位置" 这样把Toolbox的零部件另存之后,就可以修改,比如添加草图和特征,然后另存之 ...
- 内网渗透技巧:判断机器真实外网IP的5种方法总结
在内网渗透中有时需要在某台WEB服务器中留下后门,该机器可以通过内网IP建立IPC连接,但还需要获知外网IP或域名才能访问Wbshell,在无网关权限的情况下,我总结了有如下方法: 1.通过nsloo ...
- 算法笔记_101:蓝桥杯练习 算法提高 身份证号码升级(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 从1999年10月1日开始,公民身份证号码由15位数字增至18位.(18位身份证号码简介).升级方法为: 1.把15位身份证号码中的年份由 ...
- 详细解说 STL 排序(Sort)(转)
作者Winter 详细解说 STL 排序(Sort) 0 前言: STL,为什么你必须掌握 1 STL提供的Sort 算法 1.1 所有sort算法介绍 1.2 sort 中的比较函数 1.3 sor ...
- 禁止chrome自动更新
删除C:\Program Files (x86)\Google文件夹下面的updata文件夹
- 07-hibernate注解-一对多(多对一)双向外键关联
一对多(多对一)双向外键 多方:多方持有一方的引用. @ManyToOne(cascade={CasCadeType.ALL},fetch=FetchType.EAGER) @JoinColumn(n ...