<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/jquery.zbmulselect.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.zbmulselect.js" type="text/javascript" charset="utf-8"></script>
<script src="json/dataTest.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="muls-box">
<div class="muls-left-box">
<div class="muls-top">
<select class="muls-select muls-select-1" onChange="sel1_click()" id="leftChoice1">
<option value="0">请选择</option>
<option value="1">分类1</option>
<option value="2">分类2</option>
<option value="3">分类3</option>
<option value="4">分类4</option>
</select>
<input type="text" name="ssnr" id="leftss">
<span style="width:80px;height:45px;" id="searchLeft">搜索</span>
</div>
<div class="muls-content">
<select id="select1" style="height:460px;" multiple="multiple" class="muls-content-select">
</select>
</div>
</div>
<div class="muls-box-btn">
<p class="muls-btn muls-btn-mid muls-btn-mid-1" style="margin-left:45px; line-height:32px; " id="addtoR">></p><br/>
<p class="muls-btn muls-btn-mid" style="margin-left:45px;line-height:32px; " id="removeL"><</p>
</div>
<div class="muls-right-box">
<div class="muls-top">
<input type="text" name="rightss" id="rightss">
<span style="width:80px;height:45px;" id="searchRight">搜索</span>
</div>
<div class="muls-content">
<select id="select2" style="height:460px;" multiple="multiple" class="muls-content-select">
<option data="护彤 小儿氨酚黄那敏颗粒(护彤) 12袋" value="972535" style="display:block">护彤 小儿氨酚黄那敏颗粒(护彤) 12袋</option> <option data="护彤 小儿氨酚黄那敏颗粒(护彤) 12袋" value="972535" style="display:block">护彤 小儿氨酚黄那敏颗粒(护彤) 12袋</option>
</select>
</div>
</div>
</div>
<br />
<div style="width: 800px;margin: 0px auto;">
<button onClick="getRigthValues()"> 获取右侧数据</button>
</div>
</body>
<script type="text/javascript">
//动态代码
//获取多级分类
/* $.ajax({
url: '/productyp/classList',
type: 'post',
contentType : "application/json;charset=utf-8",
dataType:'json',
success: function(data) {
var arr=[];
console.log(data);
for(var i in data){
arr.push("<option disabled='disabled' style='display:block' >"+data[i].title+"</option>");
//二级分类
if(data[i].subs){
var subs=data[i].subs;
for (var y in subs) {
arr.push("<option disabled='disabled' style='display:block' >"+subs[y].title+"</option>");
//三级分类
if(subs[y].subs){
var subslist = subs[y].subs;
for (var l in subslist) {
arr.push("<option value='" + subslist[l].id + "' style='display:block' >|——" + subslist[l].title + "</option>");
}
}
}
}
}
$("#leftChoice1").append(arr.join(""));
}
});*/
//商品列表
/*$.ajax({
url: '/productyp/get_strictgoods',
type: 'post',
contentType : "application/json;charset=utf-8",
dataType:'json',
success: function(data) {
console.log(data);
$(document).zbMulSelect({
data: data
});
}
});*/
//获取动态数据
/*function getRigthValues(){
var list =$(document).zbMulSelect('getData');
lists = list.toString();
console.log(lists);
document.getElementById('goodslist').value=lists;
//alert(JSON.stringify($(document).zbMulSelect('getData')));
}*/
//动态获取商品数据
/*function sel1_click()
{
var nodeSel1=document.getElementById("leftChoice1"); //获取select元素
var index = nodeSel1.selectedIndex; // 选中bai项的索引
var text = nodeSel1.options[index].text; // 选中项的文本
var value = nodeSel1.options[index].value; // 选中项的值
$.post('/productyp/get_strictgoods',{cid:value},function(data){
var id = document.getElementById("select1");
while (id.childNodes.length > 0) {
id.removeChild(id.childNodes[0]);
}
console.log(data);
$(document).zbMulSelect({
data: data
});
},'json');
}*/
$(document).zbMulSelect({
data: dataTest
});
function getRigthValues(){
alert(JSON.stringify($(document).zbMulSelect('getData')));
}
//动态获取药品数据
function sel1_click()
{
var nodeSel1=document.getElementById("leftChoice1"); //获取select元素
var index = nodeSel1.selectedIndex; // 选中bai项的索引
var text = nodeSel1.options[index].text; // 选中项的文本
var value = nodeSel1.options[index].value; // 选中项的值
alert("您选择的是："+text+" 它的值是："+value);
}
</script>
</html>
