先看效果:
代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<c:set var="contextPath" value="${pageContext.request.contextPath}" scope="application" />
<%-- <script type="text/javascript" src="${contextPath}/webjarslocator/jquery/jquery.js"></script> --%>
<%-- <link rel="stylesheet" type="text/css" href="${contextPath}/css/jquery.multiselect.css" /> --%>
<link rel="stylesheet" type="text/css" href="${contextPath}/css/jquery.multi-select.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/style.css" />
<link data-style="theme_public" rel="stylesheet" type="text/css" href="${contextPath}/css/public.css">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.css">
<script type="text/javascript" src="${contextPath}/js/jquery-2.1.4.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<%-- <script type="text/javascript" src="${contextPath}/js/jquery.multiselect.update.js"></script> --%>
<script src="${contextPath}/js/bootstrap.min.js"></script>
<%-- <script type="text/javascript" src="${contextPath}/js/jquery.multiselect.js"></script> --%>
<script type="text/javascript" src="${contextPath}/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="${contextPath}/js/map.js"></script>
<script type="text/javascript">
$(function() {
function getData(){
var data =null;
$.ajax({
type: "get",
url: '${pageContext.request.contextPath}/indexJson',
async: false,
dataType: 'json',
success: function(json) {
//获取到数据
data = json;
},
error: function() {
value = "rquest Error";
}
});
return data;
}
function initSelect(stocks){
var childDom = "";
for (var k = 0; k < stocks.length; k++) {
if (undefined == stocks[k] || undefined == stocks[k].indexName || undefined == stocks[k].innerCode) {
continue;
}
childDom += "<option class='coption' value =" + stocks[k].innerCode + ">" + stocks[k].indexName + "</option>";
}
$('#from_2').html(childDom);
}
/**接口获取到的的数据**/
var jsonData = getData();
/**选已经别选择的map集合**/
var bigMap = {};
var pvalue=0;
/**点击第选择持仓的按钮**/
$('#chooseBtn').click(function() {
var value = "";
$.each(jsonData,
function(i, v) {
value += "<option class='poption' value =" + i + ">" + v.type + "</option>";
});
$('#from_1').html(value);
if(null != jsonData[0].stocks){
initSelect(jsonData[0].stocks);
}
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
});
/**点击第一个列表里面的option**/
$('#from_1').on('click','.poption',function(){
//父节点option的值
pvalue = $(this).val();
//标记那个父节点被选中了
$('.poption').removeClass('pactive');
$(this).addClass('pactive');
if (null != pvalue) {
var stocks = jsonData[pvalue].stocks;
var childDom = "";
for (var k = 0; k < stocks.length; k++) {
if (undefined == stocks[k] || undefined == stocks[k].indexName || undefined == stocks[k].innerCode) {
continue;
}
childDom += "<option class='coption' value =" + stocks[k].innerCode + ">" + stocks[k].indexName + "</option>";
}
$('#from_2').html(childDom);
}
});
/**点击第二个列表里面的option**/
$('#from_2').on('click','.coption',function(){
//子option的值
var cvalue = $(this).val();
var _this = $(this);
var key = $(this).val(); // innerCode
var value = $(this).text(); //indexName
$(this).remove();
//判断是否包含这个option
if (bigMap.hasOwnProperty(key)) {
delete bigMap[key];
} else {
bigMap[key] = value;
//jsonData[]
}
//构造html
var selectText = "";
$.each(bigMap,
function(i, m) {
selectText += "<option class='ccoption' value =" + i + ">" + m + "</option>"
});
$('#to_1').html(selectText);
});
/**取消选择**/
$('#to_1').on('click','.ccoption',function(){
var key = $(this).val(); // innerCode
var value = $(this).text(); //indexName
$(this).remove();
if (bigMap.hasOwnProperty(key)) {
delete bigMap[key];
}
var stocks = jsonData[pvalue].stocks;
for (var k = 0; k < stocks.length; k++) {
if (undefined == stocks[k] || undefined == stocks[k].indexName || undefined == stocks[k].innerCode) {
continue;
}
if(stocks[k].innerCode == key){
$('#from_2').prepend($("<option class='coption' value =" + key + ">" + value + "</option>"));
}
}
// $.each(jsonData[pvalue],
// function(j, cv) {
// for (var k = 0; k < cv.length; k++) {
// if (undefined == cv[k] || undefined == cv[k].indexName || undefined == cv[k].innerCode) {
// continue;
// }
// if(cv[k].innerCode==key){
// $('#from_2').prepend($("<option class='coption' value =" + key + ">" + value + "</option>"));
// }
// }
// });
});
/**添加所有选择**/
$('#addAll').click(function(){
$('.coption').each(function(){
var key = $(this).val(); // innerCode
var value = $(this).text(); //indexName
$(this).remove();
if (bigMap.hasOwnProperty(key)) {
delete bigMap[key];
}
$('#to_1').append($("<option class='ccoption' value =" + key + ">" + value + "</option>"));
});
});
/**删除所有选择**/
$('#removeAll').click(function(){
$('.ccoption').each(function(){
var key = $(this).val(); // innerCode
var value = $(this).text(); //indexName
$(this).remove();
if (bigMap.hasOwnProperty(key)) {
delete bigMap[key];
}
var stocks = jsonData[pvalue].stocks;
for (var k = 0; k < stocks.length; k++) {
if (undefined == stocks[k] || undefined == stocks[k].indexName || undefined == stocks[k].innerCode) {
continue;
}
if(stocks[k].innerCode == key){
$('#from_2').append($("<option class='coption' value =" + key + ">" + value + "</option>"));
}
}
initSelect(jsonData[0].stocks);
// $.each(jsonData[pvalue],
// function(j, cv) {
// for (var k = 0; k < cv.length; k++) {
// if (undefined == cv[k] || undefined == cv[k].indexName || undefined == cv[k].innerCode) {
// continue;
// }
// if(cv[k].innerCode==key){
// $('#from_2').append($("<option class='coption' value =" + key + ">" + value + "</option>"));
// }
// }
// });
});
});
/**搜索*/
function search(){
var v = $('#searchName').val();
//console.dir(v);
if(v != null && typeof parseInt(v) =='number'){
//alert(parseInt(v));
v = parseInt(v);
$.ajax({
type: "get",
url: '${pageContext.request.contextPath}/searchJson?stockCode='+v,
async: false,
dataType: 'json',
success: function(json) {
//获取到数据
jsonData = json;
var value = "";
for(var j=0; j<jsonData.length; j++){
var stocks = jsonData[j].stocks;
if(stocks != null && stocks.length>0 ){
pvalue=j;
initSelect(stocks);
break;
}
}
$.each(jsonData,
function(i, v) {
value += "<option class='poption' value =" + i + ">" + v.type + "</option>";
});
$('#from_1').html(value);
},
error: function() {
value = "rquest Error";
}
});
}
}
$('#searchresult').click(function(){
search();
});
$('#searchName').on('input propertychange', function(){
search();
});
});
</script>
</head>
<body>
<div class="showRL" id="myProduct">
<ul class="NOpoadnav nav-pills floatR sort-inner">
<li><a class="xzjj_a" style="margin: 0!important" data-toggle="tooltip" id="chooseBtn" title="产品设置">选择资产</a></li>
</ul>
</div>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" >
<div class="modal-header pop_title">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2 class="modal-title" id="myModalLabel">选择资产</h2>
</div>
<div class="modal-body" >
<div class="col-md-12">
<div class="set2">
<div class="setTable2">
<span class="p-name floatL" id="selectNumbers"></span>
<div class="floatL set-w">
<div class="s-1 floatL">
<select name="from_1" id="from_1" multiple="multiple" size="10" class="s-two">
</select>
</div>
<div class="s-2 floatL">
<select name="from_2" id="from_2" multiple="multiple" size="10" class="s-two s-twot">
</select>
</div>
<div class="inpuw-cp padd-cp1">
<input type="button" id="addAll" value=" 全部添加 " class="inputbtn" />
<input type="button" id="removeAll" value="删除全部" class="inputbtn-b" />
</div>
<ul class="set-search floatL">
<li>
<input type="text" id="searchName" data-code="" class="zl_bor-3" maxlength="18" placeholder="请输入证券代码或名称(数字代码模糊匹配)"></li>
<li class="searbtn" id="searchresult">搜索</li>
</ul>
</div>
<div class="s-3 floatL">
<select name="to_1" id="to_1" multiple="multiple" size="10" class="s-one">
</select>
</div>
</div>
<ul class="tc-btn">
<li class="set-okbtn paddok" data-dismiss="modal" id="cp_submit">确认</li>
<li class="cancel-btn" data-dismiss="modal">取消</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>
json 数据:
[
{
"type": "常用指数",
"stocks": [
{
"indexName": "上证指数(000001)",
"innerCode": "1",
"secuCode": "000001"
},
{
"indexName": "基金指数(000011)",
"innerCode": "32",
"secuCode": "000011"
},
{
"indexName": "基金指数(399305)",
"innerCode": "1084",
"secuCode": "399305"
},
{
"indexName": "沪深300(000300)",
"innerCode": "3145",
"secuCode": "000300"
},
{
"indexName": "中证全债(H11001)",
"innerCode": "6455",
"secuCode": "H11001"
},
{
"indexName": "中债总指数全价指数(Y00001QJ)",
"innerCode": "10850",
"secuCode": "Y00001QJ"
},
{
"indexName": "中债总指数净价指数(Y00001JJ)",
"innerCode": "10851",
"secuCode": "Y00001JJ"
},
{
"indexName": "巨潮ETF(399380)",
"innerCode": "15858",
"secuCode": "399380"
},
{
"indexName": "深证ETF(399306)",
"innerCode": "15860",
"secuCode": "399306"
}
]
},
{
"type": "申万一级",
"stocks": [
{
"indexName": "申万农林牧渔(5375)",
"innerCode": "5375",
"secuCode": "801010"
},
{
"indexName": "申万采掘(5376)",
"innerCode": "5376",
"secuCode": "801020"
},
{
"indexName": "申万化工(5377)",
"innerCode": "5377",
"secuCode": "801030"
},
{
"indexName": "申万钢铁(5378)",
"innerCode": "5378",
"secuCode": "801040"
},
{
"indexName": "申万有色金属(5379)",
"innerCode": "5379",
"secuCode": "801050"
},
{
"indexName": "申万电子(5382)",
"innerCode": "5382",
"secuCode": "801080"
},
{
"indexName": "申万家用电器(5385)",
"innerCode": "5385",
"secuCode": "801110"
},
{
"indexName": "申万食品饮料(5386)",
"innerCode": "5386",
"secuCode": "801120"
},
{
"indexName": "申万纺织服装(5387)",
"innerCode": "5387",
"secuCode": "801130"
},
{
"indexName": "申万轻工制造(5388)",
"innerCode": "5388",
"secuCode": "801140"
},
{
"indexName": "申万医药生物(5389)",
"innerCode": "5389",
"secuCode": "801150"
},
{
"indexName": "申万公用事业(5390)",
"innerCode": "5390",
"secuCode": "801160"
},
{
"indexName": "申万交通运输(5391)",
"innerCode": "5391",
"secuCode": "801170"
},
{
"indexName": "申万房地产(5392)",
"innerCode": "5392",
"secuCode": "801180"
},
{
"indexName": "申万商业贸易(5394)",
"innerCode": "5394",
"secuCode": "801200"
},
{
"indexName": "申万休闲服务(5395)",
"innerCode": "5395",
"secuCode": "801210"
},
{
"indexName": "申万综合(5397)",
"innerCode": "5397",
"secuCode": "801230"
},
{
"indexName": "申万建筑材料(32616)",
"innerCode": "32616",
"secuCode": "801710"
},
{
"indexName": "申万建筑装饰(32617)",
"innerCode": "32617",
"secuCode": "801720"
},
{
"indexName": "申万电气设备(32618)",
"innerCode": "32618",
"secuCode": "801730"
},
{
"indexName": "申万国防军工(32620)",
"innerCode": "32620",
"secuCode": "801740"
},
{
"indexName": "申万计算机(32622)",
"innerCode": "32622",
"secuCode": "801750"
},
{
"indexName": "申万传媒(32623)",
"innerCode": "32623",
"secuCode": "801760"
},
{
"indexName": "申万通信(32624)",
"innerCode": "32624",
"secuCode": "801770"
},
{
"indexName": "申万银行(32625)",
"innerCode": "32625",
"secuCode": "801780"
},
{
"indexName": "申万非银金融(32626)",
"innerCode": "32626",
"secuCode": "801790"
},
{
"indexName": "申万汽车(32621)",
"innerCode": "32621",
"secuCode": "801880"
},
{
"indexName": "申万机械设备(32619)",
"innerCode": "32619",
"secuCode": "801890"
}
]
},
{
"type": "证监会一级",
"stocks": [
{
"indexName": "农林指数(399231)",
"innerCode": "22492",
"secuCode": "399231"
},
{
"indexName": "采矿指数(399232)",
"innerCode": "22493",
"secuCode": "399232"
},
{
"indexName": "制造指数(399233)",
"innerCode": "22494",
"secuCode": "399233"
},
{
"indexName": "水电指数(399234)",
"innerCode": "22495",
"secuCode": "399234"
},
{
"indexName": "建筑指数(399235)",
"innerCode": "22496",
"secuCode": "399235"
},
{
"indexName": "批零指数(399236)",
"innerCode": "22497",
"secuCode": "399236"
},
{
"indexName": "运输指数(399237)",
"innerCode": "22498",
"secuCode": "399237"
},
{
"indexName": "餐饮指数(399238)",
"innerCode": "22499",
"secuCode": "399238"
},
{
"indexName": "IT指数(399239)",
"innerCode": "22500",
"secuCode": "399239"
},
{
"indexName": "金融指数(399240)",
"innerCode": "22501",
"secuCode": "399240"
},
{
"indexName": "地产指数(399241)",
"innerCode": "22502",
"secuCode": "399241"
},
{
"indexName": "商务指数(399242)",
"innerCode": "22503",
"secuCode": "399242"
},
{
"indexName": "科研指数(399243)",
"innerCode": "22504",
"secuCode": "399243"
},
{
"indexName": "公共指数(399244)",
"innerCode": "22505",
"secuCode": "399244"
},
{
"indexName": "文化指数(399248)",
"innerCode": "22506",
"secuCode": "399248"
},
{
"indexName": "综企指数(399249)",
"innerCode": "22507",
"secuCode": "399249"
},
{
"indexName": "AMAC农林(H11030)",
"innerCode": "12491",
"secuCode": "H11030"
},
{
"indexName": "AMAC采矿(H11031)",
"innerCode": "12492",
"secuCode": "H11031"
},
{
"indexName": "AMAC公用(H11041)",
"innerCode": "12511",
"secuCode": "H11041"
},
{
"indexName": "AMAC建筑(H11042)",
"innerCode": "12493",
"secuCode": "H11042"
},
{
"indexName": "AMAC交运(H11043)",
"innerCode": "12494",
"secuCode": "H11043"
},
{
"indexName": "AMAC信息(H11044)",
"innerCode": "12495",
"secuCode": "H11044"
},
{
"indexName": "AMAC批零(H11045)",
"innerCode": "12496",
"secuCode": "H11045"
},
{
"indexName": "AMAC金融(H11046)",
"innerCode": "12497",
"secuCode": "H11046"
},
{
"indexName": "AMAC地产(H11047)",
"innerCode": "12498",
"secuCode": "H11047"
},
{
"indexName": "AMAC文体(H11049)",
"innerCode": "12500",
"secuCode": "H11049"
},
{
"indexName": "AMAC餐饮(H30036)",
"innerCode": "21851",
"secuCode": "H30036"
},
{
"indexName": "AMAC商务(H30037)",
"innerCode": "21852",
"secuCode": "H30037"
},
{
"indexName": "AMAC科技(H30038)",
"innerCode": "21853",
"secuCode": "H30038"
},
{
"indexName": "AMAC公共(H30039)",
"innerCode": "21854",
"secuCode": "H30039"
},
{
"indexName": "AMAC社会(H30040)",
"innerCode": "21855",
"secuCode": "H30040"
}
]
},
{
"type": "中信一级",
"stocks": [
{
"indexName": "CI005001(中信-石油石化)",
"innerCode": "15285",
"secuCode": "中信-石油石化"
},
{
"indexName": "CI005002(中信-煤炭)",
"innerCode": "15286",
"secuCode": "中信-煤炭"
},
{
"indexName": "CI005003(中信-有色金属)",
"innerCode": "15287",
"secuCode": "中信-有色金属"
},
{
"indexName": "CI005004(中信-电力及公用事业)",
"innerCode": "15288",
"secuCode": "中信-电力及公用事业"
},
{
"indexName": "CI005005(中信-钢铁)",
"innerCode": "15289",
"secuCode": "中信-钢铁"
},
{
"indexName": "CI005006(中信-基础化工)",
"innerCode": "15290",
"secuCode": "中信-基础化工"
},
{
"indexName": "CI005007(中信-建筑)",
"innerCode": "15291",
"secuCode": "中信-建筑"
},
{
"indexName": "CI005008(中信-建材)",
"innerCode": "15292",
"secuCode": "中信-建材"
},
{
"indexName": "CI005009(中信-轻工制造)",
"innerCode": "15293",
"secuCode": "中信-轻工制造"
},
{
"indexName": "CI005010(中信-机械)",
"innerCode": "15294",
"secuCode": "中信-机械"
},
{
"indexName": "CI005011(中信-电力设备)",
"innerCode": "15295",
"secuCode": "中信-电力设备"
},
{
"indexName": "CI005012(中信-国防军工)",
"innerCode": "15296",
"secuCode": "中信-国防军工"
},
{
"indexName": "CI005013(中信-汽车)",
"innerCode": "15297",
"secuCode": "中信-汽车"
},
{
"indexName": "CI005014(中信-商贸零售)",
"innerCode": "15298",
"secuCode": "中信-商贸零售"
},
{
"indexName": "CI005015(中信-餐饮旅游)",
"innerCode": "15299",
"secuCode": "中信-餐饮旅游"
},
{
"indexName": "CI005016(中信-家电)",
"innerCode": "15300",
"secuCode": "中信-家电"
},
{
"indexName": "CI005017(中信-纺织服装)",
"innerCode": "15301",
"secuCode": "中信-纺织服装"
},
{
"indexName": "CI005018(中信-医药)",
"innerCode": "15302",
"secuCode": "中信-医药"
},
{
"indexName": "CI005019(中信-食品饮料)",
"innerCode": "15303",
"secuCode": "中信-食品饮料"
},
{
"indexName": "CI005020(中信-农林牧渔)",
"innerCode": "15304",
"secuCode": "中信-农林牧渔"
},
{
"indexName": "CI005021(中信-银行)",
"innerCode": "15305",
"secuCode": "中信-银行"
},
{
"indexName": "CI005022(中信-非银行金融)",
"innerCode": "15306",
"secuCode": "中信-非银行金融"
},
{
"indexName": "CI005023(中信-房地产)",
"innerCode": "15307",
"secuCode": "中信-房地产"
},
{
"indexName": "CI005024(中信-交通运输)",
"innerCode": "15308",
"secuCode": "中信-交通运输"
},
{
"indexName": "CI005025(中信-电子元器件)",
"innerCode": "15309",
"secuCode": "中信-电子元器件"
},
{
"indexName": "CI005026(中信-通信)",
"innerCode": "15310",
"secuCode": "中信-通信"
},
{
"indexName": "CI005027(中信-计算机)",
"innerCode": "15311",
"secuCode": "中信-计算机"
},
{
"indexName": "CI005028(中信-传媒)",
"innerCode": "15312",
"secuCode": "中信-传媒"
},
{
"indexName": "CI005029(中信-综合)",
"innerCode": "15313",
"secuCode": "中信-综合"
}
]
},
{
"type": "债券指数",
"stocks": [
{
"indexName": "企债指数(000013)",
"innerCode": "40",
"secuCode": "000013"
},
{
"indexName": "企债指数(399481)",
"innerCode": "1085",
"secuCode": "399481"
},
{
"indexName": "中标全债(816023)",
"innerCode": "2195",
"secuCode": "816023"
},
{
"indexName": "中国债券总指数(Y00001)",
"innerCode": "2968",
"secuCode": "Y00001"
},
{
"indexName": "中证全债(H11001)",
"innerCode": "6455",
"secuCode": "H11001"
},
{
"indexName": "中证综合债(H11009)",
"innerCode": "7546",
"secuCode": "H11009"
},
{
"indexName": "企业债指数(YH0007)",
"innerCode": "10718",
"secuCode": "YH0007"
},
{
"indexName": "中债总指数全价指数(Y00001QJ)",
"innerCode": "10850",
"secuCode": "Y00001QJ"
},
{
"indexName": "中债总指数净价指数(Y00001JJ)",
"innerCode": "10851",
"secuCode": "Y00001JJ"
},
{
"indexName": "企业债总指数全价指数(Y00018QJ)",
"innerCode": "11045",
"secuCode": "Y00018QJ"
},
{
"indexName": "企业债总指数净价指数(Y00018JJ)",
"innerCode": "11046",
"secuCode": "Y00018JJ"
}
]
},
{
"type": "债券指数",
"stocks": [
{
"indexName": "基金指数(000011)",
"innerCode": "32",
"secuCode": "000011"
},
{
"indexName": "基金指数(399305)",
"innerCode": "1084",
"secuCode": "399305"
},
{
"indexName": "中证基金(H11020)",
"innerCode": "6652",
"secuCode": "H11020"
},
{
"indexName": "股票基金(H11021)",
"innerCode": "6653",
"secuCode": "H11021"
},
{
"indexName": "混合基金(H11022)",
"innerCode": "6654",
"secuCode": "H11022"
},
{
"indexName": "债券基金(H11023)",
"innerCode": "6655",
"secuCode": "H11023"
},
{
"indexName": "ETF净价(H11024)",
"innerCode": "8472",
"secuCode": "H11024"
},
{
"indexName": "ETF市价(930889)",
"innerCode": "89147",
"secuCode": "930889"
}
]
}
]