<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无限极级联下拉框的封装</title>
<script type="text/javascript" src="https://test.fe.ecp.mic.cn/content/scripts/base/jquery.js"></script>
<style>
select
{
margin-left: 10px;
}
body
{
font-size: 14px;
background-color: #CCCCCC;
}
td
{
border: 1px solid #FF6600;
padding: 5px;
text-align: left;
}
input
{
width: 80px;
}
input[type=checkbox]
{
width: 20px;
}
</style>
</head>
<body>
<form runat="server">
<div>
<h1>
无限极级联下拉框的封装</h1>
<div>
绑定方法：<select><option value="1">第一种方法</option>
<option value="2">第二种方法</option>
</select>
<input type="button" value="绑定" />
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
第一个下拉框：
</td>
<td>
<input type="text" value="a002" />设置当前项的选中值
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
第二个下拉框：
</td>
<td>
<input type="text" value="" />设置当前项的选中值
</td>
<td>
<input type="checkbox" value="" />是否移除第一项
</td>
<td>
<input type="text" value="0" />当前一项值等于此值时，该项全选
</td>
</tr>
<tr>
<td>
第三个下拉框：
</td>
<td>
<input type="text" value="" />设置当前项的选中值
</td>
<td>
<input type="checkbox" />是否移除第一项
</td>
<td>
<input type="text" value="" />当前一项值等于此值时，该项全选
</td>
</tr>
</table>
</div>
</div>
<h4>
下拉框结果：</h4>
<div>
</div>
<script type="text/javascript" src="https://www.jb51.net/Scripts/Jquery.cascadeDropDown-1.2.js"></script>
<script type="text/javascript">
$(function () {
toggleSetting();
$('#selCase').bind('change', toggleSetting);
});
function toggleSetting() {
if ($('#selCase').val() == '1')
$('table tr').each(function (i, item) {
$($(item).find('td')[3]).hide();
});
else
$('table tr').each(function (i, item) {
$($(item).find('td')[3]).show();
});
}
function test() {
if ($('#selCase').val() == '1')
testcase1();
else
testcase2();
}
function testcase1() {
$('#Select1').remove();
$('#Select2').remove();
$('#Select3').remove();
$('#selContainer').html('<select><option value="-1">全部</option></select><select><option value="-1">全部</option></select><select><option value="-1">全部</option></select>');
var dataItem = [['a001', 'a001', '0'], ['a002', 'a002', '0'], ['a003', 'a003', '0']
, ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001'], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a002'], ['b005', 'b005', 'a003']
, ['c001', '001', 'b001'], ['c002', '002', 'b001'], ['c003', '003', 'b002'], ['c004', '004', 'b002'], ['c005', '005', 'b003'], ['c006', '006', 'b004'], ['c007', '007', 'b004'], ['c008', '008', 'b005']
];
$.cascadeDropDownBind.bind(dataItem,
{ sourceID: 'Select1', selectValue: $('#tb1sel').val(), parentValue: '0', removeFirst: false,
child: { sourceID: 'Select2', selectValue: $('#tb2sel').val(), removeFirst: $('#cb2Remove').attr('checked'),
child: { sourceID: 'Select3', selectValue: $('#tb3sel').val(), removeFirst: $('#cb3Remove').attr('checked') }
}
}
);
}
function testcase2() {
$('#Select1').remove();
$('#Select2').remove();
$('#Select3').remove();
//$('#selContainer').html('<select></select><select></select><select></select>');
$('#selContainer').html('<select><option value="0">全部</option></select><select><option value="0">全部</option></select><select><option value="0">全部</option></select>');
var data = [['a001', 'a001'], ['a002', 'a002'], ['a003', 'a003']];
var data2 = [['b001', 'b001', 'a001'], ['b002', 'b002', 'a001'], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a002'], ['b005', 'b005', 'a003']];
var data3 = [['c001', '001', 'b001'], ['c002', '002', 'b001'], ['c003', '003', 'b002'], ['c004', '004', 'b002'], ['c005', '005', 'b003'], ['c006', '006', 'b004'], ['c007', '007', 'b004'], ['c008', '008', 'b005']];
$.cascadeDropDownBind.bind(data, { sourceID: 'Select1', selectValue: $('#tb1sel').val(), removeFirst: false });
$.cascadeDropDownBind.bind(data2, { sourceID: 'Select2', selectValue: $('#tb2sel').val(), parentID: 'Select1', removeFirst: $('#cb2Remove').attr('checked'), appentAllValue: $('#tb2AllValue').val() });
$.cascadeDropDownBind.bind(data3, { sourceID: 'Select3', selectValue: $('#tb2sel').val(), parentID: 'Select2', removeFirst: $('#cb3Remove').attr('checked'), appentAllValue: $('#tb3AllValue').val() });
}
</script>
</div>
</form>
</body>
</html>
您可能感兴趣的文章: