如何实现三级联动下拉框选中项写入文本框？

有“PM设备”，“PM类型”，“PM项目”三个联动下拉选项，选中后如何将选中的选项写入文本框？
请帮忙改写代码，谢谢！
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        PM设备：
        <select style="width: 100px;" id="pre" onchange="chg(this);">
            <option value="-1">请选择</option>
        </select>
        PM类型：
        <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
        PM项目：
        <select style="width: 100px;" id="area"></select>
    </body>
    <script>
         
        var pres = ["设备1", "设备2", "设备3"];
        
        var cities = [
            ["月度PM", "季度PM", "年度PM"],
            ["月度PM", "季度PM", "年度PM"],
            ["月度PM", "季度PM", "年度PM"]
        ];
        var areas = [
                [
                    ["1-项目1"],
                    ["1-项目2"],
                    ["1-项目3"]
                ],
                [
                    ["2-项目1"],
                    ["2-项目2"],
                    ["2-项目3"]
                ],
                [
                    ["3-项目1"],
                    ["3-项目2"],
                    ["3-项目3"]
                ]
            ]
            
        var pIndex = -1;
        var preEle = document.getElementById("pre");
        var cityEle = document.getElementById("city");
        var areaEle = document.getElementById("area");
        for (var i = 0; i < pres.length; i++) {
            //声明option.<option value="pres[i]">Pres[i]</option>
            var op = new Option(pres[i], i);
            preEle.options.add(op);
        }
        function chg(obj) {
            if (obj.value == -1) {
                cityEle.options.length = 0;
                areaEle.options.length = 0;
            }
            var val = obj.value;
            pIndex = obj.value;
            var cs = cities[val];
            var as = areas[val][0];
            cityEle.options.length = 0;
            areaEle.options.length = 0;
            for (var i = 0; i < cs.length; i++) {
                var op = new Option(cs[i], i);
                cityEle.options.add(op);
            }
            for (var i = 0; i < as.length; i++) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
        function chg2(obj) {
            var val = obj.selectedIndex;
            var as = areas[pIndex][val];
            areaEle.options.length = 0;
            for (var i = 0; i < as.length; i++) {
                var op = new Option(as[i], i);
                areaEle.options.add(op);
            }
        }
    </script>
<p>
<input  type="text" name="inptxt" id="inptxt" value=""><p/></html>

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            PM设备：
            <select style="width: 100px;" id="pre" onchange="chg(this);">
                <option value="-1">请选择</option>
            </select>
            PM类型：
            <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
            PM项目：
            <select style="width: 100px;" id="area"></select>
        </body>
        <script>
             
            var pres = ["设备1", "设备2", "设备3"];
            
            var cities = [
                ["月度PM", "季度PM", "年度PM"],
                ["月度PM", "季度PM", "年度PM"],
                ["月度PM", "季度PM", "年度PM"]
            ];
            var areas = [
                    [
                        ["1-项目1"],
                        ["1-项目2"],
                        ["1-项目3"]
                    ],
                    [
                        ["2-项目1"],
                        ["2-项目2"],
                        ["2-项目3"]
                    ],
                    [
                        ["3-项目1"],
                        ["3-项目2"],
                        ["3-项目3"]
                    ]
                ]
                
            var pIndex = -1;
            var preEle = document.getElementById("pre");
            var cityEle = document.getElementById("city");
            var areaEle = document.getElementById("area");
            for (var i = 0; i < pres.length; i++) {
                //声明option.<option value="pres[i]">Pres[i]</option>
                var op = new Option(pres[i], i);
                preEle.options.add(op);
            }
            function chg(obj) {
                if (obj.value == -1) {
                    cityEle.options.length = 0;
                    areaEle.options.length = 0;
                }
                var val = obj.value;
                pIndex = obj.value;
                var cs = cities[val];
                var as = areas[val][0];
                cityEle.options.length = 0;
                areaEle.options.length = 0;
                for (var i = 0; i < cs.length; i++) {
                    var op = new Option(cs[i], i);
                    cityEle.options.add(op);
                }
                for (var i = 0; i < as.length; i++) {
                    var op = new Option(as[i], i);
                    areaEle.options.add(op);
                }
    setText();
            }
            function chg2(obj) {
                var val = obj.selectedIndex;
                var as = areas[pIndex][val];
                areaEle.options.length = 0;
                for (var i = 0; i < as.length; i++) {
                    var op = new Option(as[i], i);
                    areaEle.options.add(op);
                }
    setText();
            }
    function getValue(obj){
    return obj[obj.selectedIndex].text;
    }
    function setText(){
    document.getElementById("inptxt").value = getValue(preEle) + getValue(cityEle) + getValue(areaEle);
    }
        </script>
    <p>
    <input  type="text" name="inptxt" id="inptxt" value=""><p/></html>