【JavaScript 学习--03】--JS动态的更改tagName

最新推荐文章于 2022-10-24 08:45:59 发布

木瓜~

最新推荐文章于 2022-10-24 08:45:59 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： javascript TagName

本文链接：https://blog.csdn.net/corner2030/article/details/53585420

版权

JavaScript 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

场景：
有一个选择列表，可供选择，但是有时候没有我们想要的item，那么可以做一个add功能。
当点击“+” button进行添加时，select Tag变成input Tag， button “+”变成 “Save”。同时在你输入完成后可以按Enter建和鼠标点击“Save” button进行保存。

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>add_new_item</title>
    <script src="../lib/lodash.min.js"></script>
    <script type="text/javascript">
        var issue_collections = new Object();   //can be save in DB.
        issue_collections = {
            "status": ['NEW', 'INV', 'CLOSE'],
            "severity": ['A-Critical', 'B-Major', 'C-Minor'],
            "frequency": ['Permanent', 'Occassional'],
            "rootcause": ['SW Bug', 'Compiling Error', 'Environment', 'Feature Sync', 'Sack Alignment']
        };

        function initOptions(key){
            var select = document.getElementById(key);
            issue_collections["status"].forEach(function (d) {
                select.options.add(new Option(d, d));
            });
        }

        // function initOptions(obj) {
        //     _.keys(obj).forEach(function (key) {
        //         var select = document.getElementById(key);
        //         var sltObj = select.childNodes;

        //         if (!sltObj.length) {   //create options only at first time.
        //             obj[key].forEach(function (d) {
        //                 select.options.add(new Option(d, d));

        //                 // //Same as below command to add option Tag
        //                 // var optionContainer = document.createElement("option");
        //                 // var optionNode = document.createTextNode(d);
        //                 // optionContainer.appendChild(optionNode);
        //                 // document.getElementById(key).appendChild(optionContainer)
        //             });
        //         }
        //     });
        // }

        //save data when press keyBoard Enter
        function keyEvent(evt, mySltID, BtnID) {
            var value = document.getElementById(BtnID).value;
            evt = (evt) ? evt : ((window.event) ? window.event : ""); //compatible for IE and FF.
            var key = evt.keyCode ? evt.keyCode : evt.which; //compatible for IE and FF.
            if (value == "Save") {
                if(key == 13){   // when press Enter during input.
                    saveData(mySltID);
                    chgtoPlusBtn(BtnID);
                    return true;
                }else {
                    return false;
                }
             }
        }

        function chgBtn(value, mySltID, BtnID) {
            if (value == 'Save') {
                saveData(mySltID);
                chgtoPlusBtn(BtnID);
            }
            else if (value == "+") {
                addOption(mySltID);
                chgToSaveBtn(BtnID);
            }
        }

        function addOption(mySltID) {
            document.getElementById(mySltID).options.length = 0;    //remove all childNodes
            var mySelect = document.getElementById(mySltID).outerHTML = document.getElementById(mySltID).outerHTML.replace(/select/g, "input");
        }

        function chgToSaveBtn(ID) {
            document.getElementById(ID).value = "Save";
        }

        function chgtoPlusBtn(ID) {
            document.getElementById(ID).value = "+";
        }

        function saveData(mySltID) {
            var slt = document.getElementById(mySltID);
            var newData = slt.value;
            if (newData) {  //input data not blank.
                issue_collections[mySltID].unshift(newData.trim());     // Put new element in the first position.
            }
            document.getElementById(mySltID).outerHTML = document.getElementById(mySltID).outerHTML.replace(/input/g, "select")
            addSelectOpt(issue_collections[mySltID], mySltID);

        }

        function addSelectOpt(obj, mySltID){
            var len = obj.length;
            var select = document.getElementById(mySltID);
            for (var i = 0; i < len; i++) {
                select.options.add(new Option(obj[i], obj[i]));
            }
        }
    </script>

</head>
<body>

    <div class="col-sm-4" >
        <form>
            <select name="select" id="status" onkeypress="keyEvent(event, 'status','Btn_status')" ></select>
            <input id="Btn_status" type="button" value="+" onclick="chgBtn(this.value, 'status', 'Btn_status')" />
        </form>
        <br>
        <input type="button" Value="Initial List" onclick="initOptions('status');" />
    </div>

</body>
</html>

下面是代码呈现的效果：
这里写图片描述

木瓜~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript 学习--03】--JS动态的更改tagName

场景：有一个选择列表，可供选择，但是有时候没有我们想要的item，那么可以做一个add功能。当点击“+” button进行添加时，select Tag变成input Tag， button “+”变成 “Save”。同时在你输入完成后可以按Enter建和鼠标点击“Save” button进行保存。下面是我的代码：<!DOCTYPE html><html><head> <title
复制链接

扫一扫