自定义三级下拉框字典
在做用户定制内容的时候，遇到一个需求，要做一个可以自定义内容的三级下拉框，用户可以自己添加、删除、修改、移动每一级下拉框中的内容。规则如下：
同级下拉框内容不能出现重复，不同父级的除外；每一级下拉框都必须有值，不能为空，且每个一级下拉框都必须有对应的二级和三级下拉框值。
分隔符号的意义：
$ 分隔每一个下拉框的值，
# 分隔具有相同父级的次级下拉框值，
| 分隔具有相同父级的同级下拉框值。
数据库字段存储格式：
F1|F2$F1S1|F1S2#F2S1|F2S2$F1S1T1|F1S1T2#F1S2T1|F1S2T2#F2S1T1|F2S1T2#F2S2T1|F2S2T2
说明：
First级x项: F1|F2 $
First级Second级x项：F1S1|F1S2 # F2S1|F2S2 $
First级Second级Third级x项：F1S1T1|F1S1T2#F1S2T1|F1S2T2#F2S1T1|F2S1T2#F2S2T1|F2S2T2
有个需要注意的地方，三级下拉框由每个#分隔开的值依次对应二级下拉框值中的一项，就是说从三级下拉框值中是无法区分它是属于哪个一级下拉框值的。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户自定义三级下拉框</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/customize_select.js"></script>
<link rel="stylesheet" href="../css/customize_select.css" />
</head>
<body>
<br/>
<div style="display: inline-block;color:#4682B4;">
<div style="display: inline-block;">
<div style="display: inline-block;">
<span>新增一级字典</span>
<input type="text" id="MainIpt" />
<input type="hidden" id="MainIptHidden" />
</div>
<div style="margin-top: 10px;">
<span style="line-height: 78px;vertical-align: top;">已选一级字典</span>
<select id="MainSlt" size="6" style="width: 164px;" onchange="SltOnChange(1)">
</select>
</div>
</div>
<div style="display: inline-block;margin-left: 10px;">
<ul class="ulBtn">
<li><input type="button" class="btn" id="MainAdd" value="添加" style="margin-left: 10px;" onclick="InsertDict('MainIpt', 'MainIptHidden', 1)" /></li>
<li><input type="button" class="btn" id="MainEdit" value="修改" style="margin-left: 10px;" onclick="EditDict('MainIpt', 'MainIptHidden', 1)" /></li>
<li><input type="button" class="btn" id="MainUp" value="上移" style="margin-left: 10px;" onclick="MoveDict(-1, 'MainIptHidden', 1, 'MainSlt')" /></li>
<li><input type="button" class="btn" id="MainDown" value="下移" style="margin-left: 10px;" onclick="MoveDict(1, 'MainIptHidden', 1, 'MainSlt')" /></li>
<li><input type="button" class="btn" id="MainDelete" value="删除" style="margin-left: 10px;" onclick="DeleteDict('MainIptHidden', 1, 'MainSlt')" /></li>
</ul>
</div>
<div style="display: inline-block;margin-left: 30px;">
<div style="display: inline-block;">
<span>新增二级字典</span>
<input type="text" id="SecondIpt" />
<input type="hidden" id="SecondIptHidden" />
</div>
<div style="margin-top: 10px;">
<span style="line-height: 78px;vertical-align: top;">已选二级字典</span>
<select id="SecondSlt" size="6" style="width: 164px;" onchange="SltOnChange(2)">
</select>
</div>
</div>
<div style="display: inline-block;margin-left: 10px;">
<ul class="ulBtn">
<li><input type="button" class="btn" id="SecondAdd" value="添加" style="margin-left: 10px;" onclick="InsertDict('SecondIpt', 'SecondIptHidden', 2)" /></li>
<li><input type="button" class="btn" id="SecondEdit" value="修改" style="margin-left: 10px;" onclick="EditDict('SecondIpt', 'SecondIptHidden', 2)" /></li>
<li><input type="button" class="btn" id="SecondUp" value="上移" style="margin-left: 10px;" onclick="MoveDict(-1,'SecondIptHidden', 2, 'SecondSlt')" /></li>
<li><input type="button" class="btn" id="SecondDown" value="下移" style="margin-left: 10px;" onclick="MoveDict(1,'SecondIptHidden', 2, 'SecondSlt')" /></li>
<li><input type="button" class="btn" id="SecondDelete" value="删除" style="margin-left: 10px;" onclick="DeleteDict('SecondIptHidden', 2, 'SecondSlt')" /></li>
</ul>
</div>
<div style="display: inline-block;margin-left: 30px;">
<div style="display: inline-block;">
<span>新增三级字典</span>
<input type="text" id="ThirdIpt" />
<input type="hidden" id="ThirdIptHidden" />
</div>
<div style="margin-top: 10px;">
<span style="line-height: 78px;vertical-align: top;">已选三级字典</span>
<select id="ThirdSlt" size="6" style="width: 164px;" onchange="SltOnChange(3)">
</select>
</div>
</div>
<div style="display: inline-block;margin-left: 10px;">
<ul class="ulBtn">
<li><input type="button" class="btn" id="ThirdAdd" value="添加" style="margin-left: 10px;" onclick="InsertDict('ThirdIpt', 'ThirdIptHidden', 3)" /></li>
<li><input type="button" class="btn" id="ThirdEdit" value="修改" style="margin-left: 10px;" onclick="EditDict('ThirdIpt', 'ThirdIptHidden', 3)" /></li>
<li><input type="button" class="btn" id="ThirdUp" value="上移" style="margin-left: 10px;" onclick="MoveDict(-1,'ThirdIptHidden', 3, 'ThirdSlt')" /></li>
<li><input type="button" class="btn" id="ThirdDown" value="下移" style="margin-left: 10px;" onclick="MoveDict(1,'ThirdIptHidden', 3,'ThirdSlt')" /></li>
<li><input type="button" class="btn" id="ThirdDelete" value="删除" style="margin-left: 10px;" onclick="DeleteDict('ThirdIptHidden', 3,'ThirdSlt')" /></li>
</ul>
</div>
<div>
<ul style="list-style-type: none;padding: 0;margin: 0;line-height: 27px;">
<li style="text-align: center;line-height: 50px;margin-top: 20px;">
<input type="button" id="submitBtn" value="提 交" onclick="FucSubmit()" class="btn" style="width: 66px;height: 31px;" />
</li>
<li style="text-align: center;line-height: 50px;">
<input type="button" id="prodSelect" value="展 示" onclick="AppendDctMain()" class="btn" style="width: 66px;height: 31px;" />
</li>
</ul>
</div>
</div>
<br/><br/>
<br/>
<div id="prodSltDiv" style="color:#4682B4;">
<div>
数据库相应字段值：<span id="dictData"></span>
</div>
<br/>
<span>请选择：</span>
<div style="display: -webkit-inline-box;">
<div>
<select id="OneSlt" style="width: 200px;" onchange="AppendDctSecond()"></select>
</div>
<div>
<select id="TwoSlt" style="width: 200px;margin-left: 8px;" onchange="AppendDctThird()"></select>
</div>
<div>
<select id="ThreeSlt" style="width: 200px;margin-left: 8px;" ></select>
</div>
</div>
</div>
</body>
</html>页面CSS：
<style type="text/css">
.btn{
border-radius: 3px;
border-color: #4682B4;
background-color: #fff;
color: #4682B4;
border: 1px solid;
width: 44px;
height: 21px;
padding: 0;
}
.btn:hover
{
background-color:#4682B4;
color: #fff;
}
.dropdown-menuNew {
position: absolute;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 201px;
padding: 5px 0;
margin: 2px 0 0 59px;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.ulBtn{
list-style-type: none;
padding: 0;
margin: 0;
line-height: 30px;
}
</style>页面JS（可以单独写出来到一个js文件中，此处为直接嵌入html中）：
<script type="text/javascript">
//一级字典下拉框对象
var objMainSlt = document.getElementById('MainSlt');
//二级字典下拉框对象
var objSecondSlt = document.getElementById('SecondSlt');
//三级字典下拉框对象
var objThirdSlt = document.getElementById('ThirdSlt');
//三级数据字典存储集合
var listThirdDDT = [];
//添加函数
function InsertDict(valIptId,hidIptId,dictIndex) {
//过滤前后空格换行等空白字符
var inputvalue = document.getElementById(valIptId).value.replace(/(^\s*)|(\s*$)/g, "");
inputvalue = inputvalue.replace((/,/g), "，").replace((/$/g), "").replace((/#/g), "＃").replace((/'/g), "’").replace((/</g), "〈").replace((/>/g), "〉");
var objIptHid = document.getElementById(hidIptId);
if (inputvalue.length > 0 && CheckValue(inputvalue,dictIndex))
{
if(dictIndex == 1){
if (objIptHid.value.length > 0)
{
objIptHid.value += "|" + inputvalue;
}
else {
objIptHid.value += inputvalue;
}
}else if(dictIndex == 2 ){
if(objMainSlt.selectedIndex >= 0)
{
var listDDT = objIptHid.value.split('#');
objIptHid.value = "";
if (listDDT[objMainSlt.selectedIndex] ? listDDT[objMainSlt.selectedIndex].length > 0 : false )
{
listDDT[objMainSlt.selectedIndex] += "|" + inputvalue;
}
else {
listDDT[objMainSlt.selectedIndex] = inputvalue;
}
var listJoin = listDDT.join("#");
objIptHid.value = listJoin;
}else if(objMainSlt.length ==0){
alert("请先输入一级字典");
}
}else if(dictIndex == 3 ){
if(objSecondSlt.selectedIndex >= 0 && objMainSlt.selectedIndex >= 0 && inputvalue.length > 0)
{
objIptHid.value = "";
var tempDDT = [];
//确定对应的一级字典
if (listThirdDDT[objMainSlt.selectedIndex]) {
tempDDT = listThirdDDT[objMainSlt.selectedIndex].split("#");
} else{
listThirdDDT[objMainSlt.selectedIndex] = "";
}
//确定对应的二级字典
if (tempDDT[objSecondSlt.selectedIndex]) {
tempDDT[objSecondSlt.selectedIndex] += "|" + inputvalue;
} else{
tempDDT[objSecondSlt.selectedIndex] = inputvalue;
}
listThirdDDT[objMainSlt.selectedIndex] = tempDDT.join("#");
objIptHid.value = listThirdDDT.join("#");
}else if(objMainSlt.length ==0 || objSecondSlt.length ==0){
alert("请先输入一级字典和二级字典");
}
}
AppendDictList(hidIptId,dictIndex);
}
}
//初始化已选字典单选下拉框
function AppendDictList(hidIptId,dictIndex) {
var objIptHid = document.getElementById(hidIptId);
var listDDT;
if(dictIndex == 1){
objMainSlt.innerHTML = "";
listDDT = objIptHid.value.split('|');
for (i = 0; i < listDDT.length; i++) {
var opt = document.createElement("OPTION");
opt.value = listDDT[i];
if (opt.value.length > 0) {
objMainSlt.add(opt, i);
opt.innerText = listDDT[i];
}
if (i == 0) {
opt.selected = true;
}
}
}else if(dictIndex == 2 && objMainSlt.selectedIndex >= 0){
objSecondSlt.innerHTML = "";
listDDT = objIptHid.value.split('#');
if (listDDT[objMainSlt.selectedIndex]) {
var listTempDDT = listDDT[objMainSlt.selectedIndex].split('|');
for (i = 0; i < listTempDDT.length; i++) {
var opt = document.createElement("OPTION");
opt.value = listTempDDT[i];
if (opt.value.length > 0) {
objSecondSlt.add(opt, i);
opt.innerText = listTempDDT[i];
}
if (i == 0) {
opt.selected = true;
}
}
}
}else if(dictIndex == 3){
objThirdSlt.innerHTML = "";
if(objSecondSlt.selectedIndex >= 0 && objMainSlt.selectedIndex >= 0)
{
if (listThirdDDT[objMainSlt.selectedIndex]) {
var listDDT = listThirdDDT[objMainSlt.selectedIndex].split('#');
if (listDDT[objSecondSlt.selectedIndex]) {
var listTempTwoDDT = listDDT[objSecondSlt.selectedIndex].split('|');
for (i = 0; i < listTempTwoDDT.length; i++) {
var opt = document.createElement("OPTION");
opt.value = listTempTwoDDT[i];
if (opt.value.length > 0) {
objThirdSlt.add(opt, i);
opt.innerText = listTempTwoDDT[i];
}
if (i == 0) {
opt.selected = true;
}
}
}
}
}
}
}
//检查新增字典是否合法
function CheckValue(checkvalue,dictIndex) {
//字符数检查
var str, Num = 0;
for (j = 0; j < checkvalue.length; j++) {
str = checkvalue.substring(j, j + 1);
if (str <= "~") //对双字节字特殊处理
Num += 1;
else
Num += 2;
if (Num > 50) {
alert("备选值最多为50个英文字符或25个中文字符！");
return false;
}
}
//保留字符检查
str = "";
if (checkvalue.indexOf("'") > -1) {
str = "请不要在新增项中使用\'字符";
}else if (checkvalue.indexOf("|") > -1) {
str = "请不要在新增项中使用\|字符";
} else if(checkvalue.indexOf("#") > -1){
str = "请不要在新增项中使用\#字符";
}else if (checkvalue.indexOf("$") > -1) {
str = "请不要在新增项中使用\$字符";
}
if(str != ""){
alert(str);
return false;
}
//是否存在重复项检查
var listDDT;
if (dictIndex == 1) {
listDDT = document.getElementById("MainIptHidden").value.split('|');
for (i = 0; i < listDDT.length; i++) {
if (checkvalue == listDDT[i]) {
alert("一级字典已存在相同的值。");
return false;
}
}
} else if(dictIndex == 2){
if(objMainSlt.selectedIndex >= 0)
{
listDDT = document.getElementById("SecondIptHidden").value.split('#');
if (listDDT[objMainSlt.selectedIndex] ? listDDT[objMainSlt.selectedIndex].length > 0 : false ) {
var tempDDTSecond = listDDT[objMainSlt.selectedIndex].split('|');
for (i = 0; i < tempDDTSecond.length; i++) {
if (checkvalue == tempDDTSecond[i]) {
alert("二级字典已存在相同的值。");
return false;
}
}
}
}
} else if(dictIndex == 3){
if (listThirdDDT[objMainSlt.selectedIndex]) {
var tempDDTthird = listThirdDDT[objMainSlt.selectedIndex].split("#");
if (tempDDTthird[objSecondSlt.selectedIndex]) {
var TempArray = tempDDTthird[objSecondSlt.selectedIndex].split('|');
for (i = 0; i < TempArray.length; i++) {
if (checkvalue == TempArray[i]) {
alert("三级字典已存在相同的值。");
return false;
}
}
}
}
}
return true;
}
//切换选中项时
function SltOnChange(sltIndex){
var objPrePreSlt = document.getElementById('MainSlt');
var objPreSlt = document.getElementById('SecondSlt');
if(sltIndex == 1){
//重新初始化二级字典
AppendDictList('SecondIptHidden', 2);
//重新初始化三级字典
AppendDictList('ThirdIptHidden', 3);
}else if(sltIndex == 2){
//重新初始化三级字典
AppendDictList('ThirdIptHidden', 3);
}
}
//修改选中的数据字典
function EditDict(valIptId,hidIptId,dictIndex){
//过滤前后空格换行等空白字符
var inputvalue = document.getElementById(valIptId).value.replace(/(^\s*)|(\s*$)/g, "");
inputvalue = inputvalue.replace((/,/g), "，").replace((/$/g), "").replace((/#/g), "＃").replace((/'/g), "’").replace((/</g), "〈").replace((/>/g), "〉");
var objIptHid = document.getElementById(hidIptId);
var editedValue = "";
if (inputvalue.length > 0 && CheckValue(inputvalue,dictIndex))
{
if(dictIndex == 1){
for(i=0;i<objMainSlt.length;i++){
if(objMainSlt[i].selected){
editedValue += editedValue == "" ? inputvalue : "|" + objMainSlt[i].value;
}else{
editedValue += editedValue == "" ? inputvalue : "|" + objMainSlt[i].value;
}
}
objIptHid.value = editedValue;
}else if(dictIndex == 2 && objMainSlt.selectedIndex >= 0){
for(i=0;i<objSecondSlt.length;i++){
if(objSecondSlt[i].selected){
editedValue += editedValue == "" ? inputvalue : "|" + objSecondSlt[i].value;
}else{
editedValue += editedValue == "" ? inputvalue : "|" + objSecondSlt[i].value;
}
}
var listDDT = objIptHid.value.split("#")
listDDT[objMainSlt.selectedIndex] = editedValue;
objIptHid.value = listDDT.join("#");
}else if(dictIndex == 3 && objMainSlt.selectedIndex >= 0 && objSecondSlt.selectedIndex >= 0){
for(i=0;i<objThirdSlt.length;i++){
if(objThirdSlt[i].selected){
editedValue += editedValue == "" ? inputvalue : "|" + objThirdSlt[i].value;
}else{
editedValue += editedValue == "" ? inputvalue : "|" + objThirdSlt[i].value;
}
}
var listDDT = listThirdDDT[objMainSlt.selectedIndex].split("#");
listDDT[objSecondSlt.selectedIndex] = editedValue;
listThirdDDT[objMainSlt.selectedIndex] = listDDT.join("#");
objIptHid.value = listThirdDDT.join("#");
}
AppendDictList(hidIptId,dictIndex);
}
}
//上下移动数据字典
function MoveDict(ud,hidIptId,dictIndex,sltId) {
var objIptHid = document.getElementById(hidIptId);
var objSlt = document.getElementById(sltId);
var moveIndex = -1;
//切换下拉框中选项的顺序
for (i = 0; i < objSlt.length; i++) {
var values = i + (ud);
if (objSlt.item(i).selected && values >= 0 && values < objSlt.length) {
moveIndex = i;
objSlt.item(i).selected = false;
var strHtml = objSlt.item(i).outerHTML;
objSlt.item(i).outerHTML = objSlt.item(values).outerHTML;
objSlt.item(values).outerHTML = strHtml;
objSlt.item(values).selected = true;
break;
}
}
if (dictIndex == 1) {
//移动一级字典时，修改二级字典
if (moveIndex != -1) {
var listSecondDDT = document.getElementById("SecondIptHidden").value.split("#");
var curIndexDict = listSecondDDT[moveIndex];
listSecondDDT[moveIndex] = listSecondDDT[moveIndex + (index)];
listSecondDDT[moveIndex + (index)] = curIndexDict;
document.getElementById("SecondIptHidden").value = listSecondDDT.join("#");
}
//移动一级字典时，修改三级字典
if (moveIndex != -1) {
var curIndexDict = listThirdDDT[moveIndex];
listThirdDDT[moveIndex] = listThirdDDT[moveIndex + (index)];
listThirdDDT[moveIndex + (index)] = curIndexDict;
document.getElementById("ThirdIptHidden").value = listThirdDDT.join("#");
}
//重新初始化二级字典
AppendDictList('SecondIptHidden', 2);
//重新初始化三级字典
AppendDictList('ThirdIptHidden', 3);
} else if(dictIndex == 2){
//移动二级字典时，修改三级字典
if (listThirdDDT[objMainSlt.selectedIndex]) {
var tempDDT = listThirdDDT[objMainSlt.selectedIndex].split("#");
if (moveIndex != -1) {
var curIndexDict = tempDDT[moveIndex];
tempDDT[moveIndex] = tempDDT[moveIndex + (index)];
tempDDT[moveIndex + (index)] = curIndexDict;
}
listThirdDDT[objMainSlt.selectedIndex] = tempDDT.join("#");
objIptHid.value = listThirdDDT.join("#");
}
//重新生成三级字典
AppendDictList('ThirdIptHidden', 3);
}else if(dictIndex == 3){
var tempDDT = listThirdDDT[objMainSlt.selectedIndex].split("#");
//清空当前操作的字典字符数组值，用于重新赋值
tempDDT[objSecondSlt.selectedIndex] = "";
for (i = 0; i < objSlt.length; i++) {
if (i == objSlt.length - 1) {
tempDDT[objSecondSlt.selectedIndex] += objSlt.item(i).value;
} else {
tempDDT[objSecondSlt.selectedIndex] += objSlt.item(i).value + "|";
}
}
//三级字典存储值
listThirdDDT[objMainSlt.selectedIndex] = tempDDT.join("#");
//传入后台的隐藏域赋值
objIptHid.value = listThirdDDT.join("#");
}
}
//删除数据字典
function DeleteDict(hidIptId,dictIndex,sltId) {
var objIptHid = document.getElementById(hidIptId);
var objSlt = document.getElementById(sltId);
var deleteIndex = "";
//删除下拉框选中的值
for (i = 0; i < objSlt.length; i++) {
if (objSlt.item(i).selected) {
deleteIndex = i;
objSlt.remove(i);
if (objSlt.length > 0) {
if (i == objSlt.length ) {
objSlt.item(i-1).selected = true;
} else{
objSlt.item(i).selected = true;
}
}
break;
}
}
if (dictIndex == 1) {
//删除一级字典
var listDT = objIptHid.value.split("|");
listDT.splice(deleteIndex,1);
objIptHid.value = listDT.join("|");
//删除二级字典
var listSecDT = document.getElementById("SecondIptHidden").value.split("#");
listSecDT.splice(deleteIndex,1);
document.getElementById("SecondIptHidden").value = listSecDT.join("#");
//删除三级字典
if (listThirdDDT.length) {
listThirdDDT.splice(deleteIndex, 1);
document.getElementById("ThirdIptHidden").value = listThirdDDT.join("#");
}
//重新初始化二级字典
AppendDictList('SecondIptHidden', 2);
//重新初始化三级字典
AppendDictList('ThirdIptHidden', 3);
} else if(dictIndex == 2){
//删除二级字典
var listSecDT = document.getElementById("SecondIptHidden").value.split("#");
if (objMainSlt.selectedIndex >= 0) {
var tempDT = listSecDT[objMainSlt.selectedIndex].split("|");
tempDT.splice(deleteIndex,1);
listSecDT[objMainSlt.selectedIndex] = tempDT.join("|");
}
document.getElementById("SecondIptHidden").value = listSecDT.join("#");
//删除三级字典
if (listThirdDDT.length > 0 && objMainSlt.selectedIndex >= 0) {
if(listThirdDDT[objMainSlt.selectedIndex]){
var tempDT = listThirdDDT[objMainSlt.selectedIndex].split("#");
tempDT.splice(deleteIndex, 1);
listThirdDDT[objMainSlt.selectedIndex] = tempDT.join("#");
document.getElementById("ThirdIptHidden").value = listThirdDDT.join("#");
}
}
//重新初始化三级字典
AppendDictList('ThirdIptHidden', 3);
} else if(dictIndex == 3){
//删除三级字典
if (listThirdDDT.length > 0 && objMainSlt.selectedIndex >= 0) {
var tempDT = listThirdDDT[objMainSlt.selectedIndex].split("#");
var tempDT2 = tempDT[objSecondSlt.selectedIndex].split("|");
tempDT2.splice(deleteIndex, 1);
tempDT[objSecondSlt.selectedIndex] = tempDT2.join("|")
listThirdDDT[objMainSlt.selectedIndex] = tempDT.join("#");
document.getElementById("ThirdIptHidden").value = listThirdDDT.join("#");
}
}
}
//提交事件
function FucSubmit(){
var firstVal = document.getElementById("MainIptHidden").value;
var secondVal = document.getElementById("SecondIptHidden").value;
var thirdVal = document.getElementById("ThirdIptHidden").value;
var firstDT = firstVal.split("|");
var secondDT = secondVal.split("#");
var thirdDT = thirdVal.split("#");
if (firstVal.length <= 0) {
alert("一级字典值不能为空！")
return false;
} else{
if(secondVal.length > 0 && secondVal.length >= firstDT.length){
for (i=0; i< firstDT.length; i++) {
if(secondDT[i]){
if (secondDT[i] == "") {
alert("一级字典中第 " + (i+1) + " 项下的二级字典值不能为空！")
return false;
}
}
else{
alert("一级字典中第 " + (i+1) + " 项下的二级字典值不能为空！")
return false;
}
}
}else{
alert("二级字典值不能为空！")
return false;
}
}
//三级字典检查
if(thirdVal.length > 0){
var tempDT2 = [];
var k = 0;
for (var i = 0; i < secondDT.length; i++) {
var tempList = secondDT[i].split('|');
for (var j = 0; j < tempList.length; j++) {
tempDT2[k] = tempList[j];
k++;
}
}
for (var i = 0; i < thirdDT.length; i++) {
if (thirdDT.length != tempDT2.length || thirdDT[i] == "") {
alert("三级字典值不能为空！");
return false;
}
}
}else{
alert("三级字典值不能为空！")
return false;
}
document.getElementById("dictData").innerHTML = firstVal + "$" + secondVal + "$" + thirdVal;
$("#prodSelect,#prodSltDiv").css("display","")
}
//一级字典下拉框对象
var objOneSlt = document.getElementById('OneSlt');
//二级字典下拉框对象
var objTwoSlt = document.getElementById('TwoSlt');
//三级字典下拉框对象
var objThreeSlt = document.getElementById('ThreeSlt');
//展示事件
//三级下拉框初始化
function AppendDctMain(){
objOneSlt.innerHTML = '';
objTwoSlt.innerHTML = '';
objThreeSlt.innerHTML = '';
$("div").remove(".slt-main");
var dtData = document.getElementById("dictData").innerHTML;
var strDict = dtData.split('$');
var strDictFirst = strDict[0].split('|');
var strDictSecond = strDict[1].split('#');
for (let i =0; i <strDictFirst.length; i++)
{
var opt = document.createElement("OPTION");
if (strDictSecond[i])
{
opt.value = strDictSecond[i];
objOneSlt.appendChild(opt);
opt.innerHTML = strDictFirst[i];
}
}
if (objOneSlt.length > 0)
{
objOneSlt.item(0).selected = true;
creatSelect("OneSlt","AppendDctSecond");
AppendDctSecond();
}
}
//三级下拉框二级字典初始化
function AppendDctSecond() {
var dtData = document.getElementById("dictData").innerHTML;
var strDict = dtData.split('$');
objTwoSlt.innerHTML = '';
$("#TwoSlt").next().remove(".slt-main");
if (strDict.length > 0) {
var secDct = strDict[1].split('#');
//获取三级字典
var preThirdDct = strDict[2].split('#');
var secDctIn = [];
var thirdDct = [];
var alength = 0;
for (var i = 0; i < secDct.length; i++) {
alength = secDct[i].split('|').length;
secDctIn[i] = preThirdDct.splice(0, alength);
thirdDct[i] = secDctIn[i].join('#');
}
var thirdDctChose = thirdDct[objOneSlt.selectedIndex].split('#');
var selectedDictValue = secDct[objOneSlt.selectedIndex].split('|');
var opt = document.createElement("OPTION");
opt.innerHTML = "全部";
opt.value = "全部";
objTwoSlt.appendChild(opt);
for (i = 0; i < selectedDictValue.length; i++)
{
var opt = document.createElement("OPTION");
opt.value = thirdDctChose[i];
if (opt.value.length > 0)
{
opt.innerHTML = selectedDictValue[i];
objTwoSlt.appendChild(opt);
}
}
if (objTwoSlt.length > 0)
{
objTwoSlt.item(0).selected = true;
creatSelect("TwoSlt","AppendDctThird");
AppendDctThird();
}
}
}
//三级下拉框三级字典初始化
function AppendDctThird() {
var dtData = document.getElementById("dictData").innerHTML;
var strDict = dtData.split('$');
objThreeSlt.innerHTML = '';
$("#ThreeSlt").next().remove(".slt-main");
if (objTwoSlt.value != "全部") {
//获取三级字典
var secDct = strDict[1].split('#');
var preThirdDct = strDict[2].split('#');
var secDctIn = [];
var thirdDct = [];
var alength = 0;
for (var i = 0; i < secDct.length; i++) {
alength = secDct[i].split('|').length;
secDctIn[i] = preThirdDct.splice(0, alength);
thirdDct[i] = secDctIn[i].join('#');
}
var thirdDctChose = thirdDct[objOneSlt.selectedIndex].split('#');
var sltIndex = objTwoSlt.selectedIndex-1;
var selectedDictValue = thirdDctChose[sltIndex].split('|');
var opt = document.createElement("OPTION");
opt.innerHTML = "全部";
opt.value = "全部";
objThreeSlt.appendChild(opt);
for (i = 0; i < selectedDictValue.length; i++)
{
var opt = document.createElement("OPTION");
opt.value = selectedDictValue[i];
if (opt.value.length > 0)
{
objThreeSlt.appendChild(opt);
opt.innerHTML = selectedDictValue[i];
}
}
if (objThreeSlt.length > 0)
{
objThreeSlt.item(0).selected = true;
}
}
creatSelect("ThreeSlt");
}
</script>html中引用的本地js和css文件是一个对下拉框的美化，方法creatSelect()为美化下拉框的调用方法。
customize_select.css
* {
margin: 0;
list-style: none;
padding: 0;
}
body {
font-family: Helvetica, arial, sans-serif;
}
.slt-main{
background-color: #FFFFFF;
border: 1px solid #4682B4;
box-shadow: 0 0 2px #4682B4;
border-radius: 5px;
font-size: 17px;
height: 30px;
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
}
.slt-arrow{
border-top: 7px solid #4682B4;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
cursor: pointer;
height: 0px;
position: absolute;
top: 12px;
right: 10px;
width: 0px;
z-index: 7;
}
.slt-arrow.reverse {
border-top: 7px solid transparent;
border-bottom: 7px solid #4682B4;
top: 4px;
}
.slt-set{
background-color: #FFFFFF;
border-radius: 5px;
color: #4682B4;
cursor: pointer;
height: 27px;
line-height: 27px;
overflow: hidden;
position: relative;
padding: 0 35px 0 15px;
width: 150px;
z-index: 5;
}
.slt-block{
background-color: #FFFFFF;
border-left: 1px solid #4682B4;
border-right: 1px solid #4682B4;
border-bottom: 1px solid #4682B4;
border-radius: 5px;
box-shadow: 0 0 2px #4682B4;
left: -1px;
line-height: 20px;
position: absolute;
top: 32px;
width: 200px;
}
.slt-list{
cursor: pointer;
margin: 15px 0 7px;
list-style-type: none;
}
.slt-item{
color: #4682B4;
padding: 6px 15px;
}
li.slt-item.active{
background-color: rgb(45, 178, 255);
color: #FFFFFF;
}
.slt-item:hover{
background-color: rgb(45, 178, 255);
color: #FFFFFF;
}
ul.slt-list::-webkit-scrollbar {
width: 12px;
}
ul.slt-list::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
}customize_select.js：
var num = 0;
function creatSelect(strId,relatedFunc) {
var objSlt = $("#" + strId);
objSlt.css("display", "");
var strSltDefault = '<div id="creatSlt' + num + '" class="slt-main" style="' +objSlt.attr("style") + '"><div class="slt-arrow"></div><div class="slt-set"></div><div class="slt-block" style="display: none;"><ul class="slt-list" style="height: 200px; overflow: auto;"></ul></div><div>'
objSlt.css("display", "none");
objSlt.after(strSltDefault);
var objSltOptList = objSlt.find("option");
var objCreat = $("#creatSlt" + num);
var strLi = "";
for(let i = 0; i < objSltOptList.length; i++) {
var objLi = $(objSltOptList[i]);
if(objLi.prop("selected") || objLi.attr("selected")) {
strLi += '<li class="slt-item active" value="' + objLi.attr("value") + '">' + objLi.text() + '</li>'
objSlt.next("div").find(".slt-set").text(objLi.text());
} else {
strLi += '<li class="slt-item" value="' + objLi.attr("value") + '">' + objLi.text() + '</li>'
}
}
objSlt.next("div").find(".slt-list").append(strLi);
$("#creatSlt" + num).bind("click", function() {
$(".slt-block").css("display", "none");
$(".slt-arrow").removeClass("reverse");
if($(this).find(".slt-block").css("display") == "none") {
$(this).find(".slt-block").css("display", "block")
$(this).find(".slt-arrow").addClass("reverse");
} else {
$(this).find(".slt-block").css("display", "none")
$(this).find(".slt-arrow").removeClass("reverse");
}
});
objCreat.find(".slt-block").bind("click", function(e) {
var src;
if(e.target) {
src = $(e.target);
} else {
src = $(e.srcElement);
}
objCreat.find(".slt-set").text(src.text());
objCreat.find(".slt-list .active").removeClass("active");
src.addClass("active");
objSlt.get(0).selectedIndex = src.index();
if(relatedFunc){
eval(relatedFunc+"()");
}
});
num++;
}
$(document).bind("click",
function(e) {
if(!$(e.target).is(".slt-set") && !$(e.target).is(".slt-arrow") && !$(e.target).is(".slt-main")) {
$(".slt-block").css("display", "none")
$(".slt-arrow").removeClass("reverse");
}
}
);
2700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
