$.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的更多相关文章

  1. web 前端常用组件【03】Bootstrap Multiselect

    实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...

  2. JS组件系列——两种bootstrap multiselect组件大比拼

    前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...

  3. bootstrap multiselect两大组件

    组件说明以及API 1.第一个组件——multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它选中的效果不太好.关于它的效果展示,我们放在后面. 2.第二个组件——bootstr ...

  4. Bootstrap Multiselect插件使用步骤以及常见参数配置介绍

    Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选.它应用的主要步骤如下: 一,引入需要的相关js和css文件 既然是Bootstrap插件, ...

  5. Bootstrap Multiselect

    Getting Started Link the Required Files First, the jQuery library needs to be included. Then Twitter ...

  6. 使用BootStrap框架设置全局CSS样式

    一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...

  7. easyui-combobox 设置option内容不换行

    使用easyui 1.4.4 1 2 3 4 5 6 7 8 <select id="hotalid" class="easyui-combobox" d ...

  8. Django实战(5):引入bootstrap,设置静态资源

    之前生成了Product类的scaffold,但是如同rails的开发者David所讲的那样,scaffold几乎没什么用.所以按照<Agile Web Development with Rai ...

  9. js 动态设置 option 的selected 选项

    思路:通过for循环判断每个选项,一旦满足条件则设置其selected属性为true即可,关键代码: var obj = document.getElementById(select_id); for ...

随机推荐

  1. Thinkpad 笔记本 装win7 64 位操作系统热键驱动装不上问题解决!

    Thinkpad 笔记本 装win7 64 位操作系统热键驱动装不上问题解决! 一般牛人的解释如下: 问题终于搞定.是因为需要手工建%PROGRAMFILES%\Lenovo\Hotkey目录.这个写 ...

  2. MVC入门教程二[第一个小Demo](转载)

    本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 3.创建控制器 4.调试 5 ...

  3. App服务端架构变迁

    随着移动互联网时代的到来,移动技术也随之飞速发展.如今,App已然成为绝大多数互联网企业用来获取用户的核心渠道.以往以PC为主要承载平台的各业务线,源源不断集成加入到移动项目中来,原本以产品为中心快速 ...

  4. VLC 源代码结构

    x64 sudo apt-get install -y liblua5.2-dev libmad0-dev libavutil-dev libavcodec-dev libavformat-dev l ...

  5. [Mac A]为什么国外程序员爱用 Mac?

    from http://www.vpsee.com/2009/06/why-programmers-love-mac/ Mac 在国外很受欢迎,尤其是在 设计/web开发/IT 人员圈子里.普通用户喜 ...

  6. 两名技术人员,历经8小时Piranha Games成功集成Xsolla

    w=580&h=304" alt="" width="580" height="304" style="max- ...

  7. (八)Oracle学习笔记—— 触发器

    1. 触发器简介 触发器在数据库里以独立的对象存储,类似于过程(procedure)和函数(function),都有声明,执行和异常处理过程的PL/SQL块.它与存储过程和函数不同的是,存储过程与函数 ...

  8. 15个极好的Linux find命令示例

    基于访问/修改/更改时间查找文件 你可以找到基于以下三个文件的时间属性的文件. 访问时间的文件.文件访问时,访问时间得到更新. 的文件的修改时间.文件内容修改时,修改时间得到更新. 更改文件的时间.更 ...

  9. Android实现换肤功能(一)

    上周有个朋友给建议说讲讲换肤吧,真巧这周公司的工作安排也有这个需求,换的地方之多之繁,让人伤神死了.正所谓磨刀不误砍柴工,先磨下刀,抽出一个工具类,写了个关于换肤的简单demo. Android中换肤 ...

  10. Latex插入项目列表符号

    1. 关于 {itemize}里序号的形式 (这个在书里有介绍): latex默认生成的简单列表, 默认为一个小圆点,..... 而我们在写文章时可能想要一些不一样的列表符号, 比如 -, * 之类的 ...