自定義三級下拉框字典

原創 csmzl 2018-08-30 16:27

自定義三級下拉框字典

在做用戶定製內容的時候，遇到一個需求，要做一個可以自定義內容的三級下拉框，用戶可以自己添加、刪除、修改、移動每一級下拉框中的內容。規則如下：
同級下拉框內容不能出現重複，不同父級的除外；每一級下拉框都必須有值，不能爲空，且每個一級下拉框都必須有對應的二級和三級下拉框值。

分隔符號的意義：
$ 分隔每一個下拉框的值，
# 分隔具有相同父級的次級下拉框值，
| 分隔具有相同父級的同級下拉框值。

數據庫字段存儲格式：
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");
        }
    }
);
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

ssm根據pdf模板導出pdf

一、使用word設計pdf模板，並另存爲pdf格式的文件。 二、使用Adobe Acrobat DC工具，打開pdf文件，工具中選擇準備表單並打開 三、在文件中設置域名稱，如下圖 四、下面是正式的操作 pom依賴 <!-- 生成P

LVAmber 2020-07-08 12:00:10

給ASP.NET MVC及WebApi添加路由優先級

這是一個對Asp.Net Mvc的一個很小的功能拓展，小項目可能不太需要這個功能，但有時候項目大了註冊的路由不生效時你應該要想到有可能是因爲路由順序的原因，這時這個路由優先級的功能有可能就會給你帶來便利。 一、爲什麼需要路由優先級

gigizhui 2020-07-08 11:54:27

HTML5入門之常用標籤

html5標準網頁聲明 <!DOCTYPE html> 必要結構 <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

blackcatkiller 2020-07-08 10:51:12

除了自動化訪問性測試，我還對構建的頁面做的六件事

本文翻譯自《Beyond automatic accessibility testing: 6 things I check on every website I build》。如有翻譯不當之處，請不吝指正。 我剛對客戶端完成一次

风萧萧梦潇 2020-07-08 10:22:22

筆記：jdk 1.8 使用switch報錯:Incompatible types. Found: ‘java.lang.String‘, required: ‘byte, char, short o

今天我在使用idea開發Java的時候發現，jdk1.8使用switch報錯，Incompatible types. Found: 'java.lang.String', required: 'byte, char, short o：

stulln 2020-07-08 08:36:20

簡單實現富文本編輯器

下載地址：http://kindeditor.net/ ssm+angular+bootstarp 一、下載 將下載的文件解壓放在項目中靜態目錄下如： 二、在數據庫中找到相應的字段，進行綁定，再調用editor.htm

stulln 2020-07-08 08:36:20

Flask學習筆記（二）瞭解框架

1.1 瞭解框架： Flask作爲Web框架，它的作用主要是爲了開發Web應用程序。那麼我們首先來了解下Web應用程序。Web應用程序 (World Wide Web)誕生最初的目的，是爲了利用互聯網交流工作文檔。 HTTP請求過

还算小萌新？ 2020-07-08 08:28:41

koa應用的部署

koa應用的部署 koa2項目的簡單創建到服務器的部署， 本例使用centos。 創建koa2項目 npm install -g koa-generator npm start 是 npm run start npm stop

这魏先森 2020-07-08 08:25:02

自定義標籤2&簡單標籤

       由於傳統標籤使用三個標籤接口來完成不同的功能，顯得過於繁瑣，不利於標籤技術的推廣，SUN公司爲降低標籤技術的學習難度，在JSP2.0中定義了一個更爲簡單、便於編寫和調用的SimpleTag接口來實現標籤的功能。實現Simpl

祁琼冉 2020-07-08 07:54:27

隨筆——web的深入學習方向

開始階段 學習javaweb 從開始的javaSE->javaEE->框架然後就宕機了。一直坐着沒意思的CRUD。 這時候開始利用反射IO寫點自動生成工具。 然後設計數據庫，一對一關係，多對多關係，數據的類型選擇。研究業務設計。發現其實你

l清水 2020-07-08 07:38:46

Windows 系列都有那些版本?

Windows NT 各發布版本 NT版本 市場名稱 版本 發行日期 RTM Build NT 3.1 Windows NT 3.1 Workstation（僅被命名爲“Windows NT”）, Advance

qhd_whm 2020-07-08 07:03:30

JavaWeb-14-SpringMVC的簡介和Helloword

Table of Contents 一：springMVC簡介 1：是Spring實現web模塊的；簡化web開發的 2：傳統的MVC 3：springMVC下的MVC  二：springMVC的HelloWorld 1：普通web模式下

苍杲 2020-07-08 06:54:10

長度擴展攻擊詳解

這幾天在看密碼學的長度擴展攻擊，看了不少文章，感覺都說得不夠清楚，自己弄清楚之後想寫一篇，做一個記錄。 1. 簡介        長度擴展攻擊（length extension attack），是指針對某些允許包含額外信息的加密散列函數

szuaurora 2020-07-08 06:53:55

2017zctf misc300

下載題目後是個zip壓縮包，帶有密碼，本質是zip僞加密，解決方法可以是用壓縮包自帶的修復功能，或者用二進制打開工具修改zip文件頭，或者直接在linux下用binwalk –e 直接解壓 成功解壓後是幾個不熟悉的文件格式，還是用binw

szuaurora 2020-07-08 06:53:53

詳細解說IIS運用程序池以及運用程序池回收

什麼是應用程序池呢？這是微軟的一個全新概念：應用程序池是將一個或多個應用程序鏈接到一個或多個工作進程集合的配置。因爲應用程序池中的應用程序與其他應用程序被工作進程邊界分隔，所以某個應用程序池中的應用程序不會受到其他應用程序池中應用程序所產

TQY2008 2020-07-08 03:00:54