[JavaScript][表单文本框&下拉列表框操作]

最新推荐文章于 2024-03-26 08:53:45 发布

Jia的博客

最新推荐文章于 2024-03-26 08:53:45 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript web android mysql jQuary

本文链接：https://blog.csdn.net/Konaji/article/details/50788692

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

首先是Html

<body>
    <form id="form1">
        <input type="type" value="111111" ></input>
        <input type="type" value="222222" ></input>
        <input type="type" value="333333" ></input>
        <input type="button" value="按钮" ></input>
    </form>

    <select name="edu" id="edu">
        <option value="博士">博士~~~</option>
        <option value="硕士">硕士~~~</option>
        <option value="本科">本科~~~</option>
        <option value="大专">大专~~~</option>
    </select>

    <select name="job" id="job">
        <option value="工程师">工程师~~~</option>
        <option value="教师">教师~~~</option>
        <option value="建筑师">建筑师~~~</option>
        <option value="记者">记者~~~</option>
    </select>

    <br/>

    <input type="button" value="js测试" onclick="text5()"></input>
</body>

JS操作代码:

    <script type="text/javascript">
    /*
        form表单的节点对象属性:
        type:表单类型
        id:表单ID
        name:表单name值

    */
        function text(){
            //获取ID为form1表单的所有input标签的value值
            var elements = document.getElementById("form1");
            var types = elements.getElementsByTagName("input");
            for (var i = 0; i < types.length; i++) {
                alert(types[i].value);
            }
        }

        function text1(){
            //获取表单所有非type为button的value值
            var elements = document.getElementById("form1");
            var types = elements.getElementsByTagName("input");
            for (var i = 0; i < types.length; i++) {
                if (types[i].type != 'button') {
                    alert(types[i].value);
                }
            }
        }


        function text2(){
            //给所有input表单注册一个change事件
            var elements = document.getElementById("form1");
            var types = elements.getElementsByTagName("input");
            for (var i = 0; i < types.length; i++) {
                var input = types[i];
                input.onchange = function(){
                    alert(this.value);
                }
            }
        }

        function text3(){
            //输出下拉列表所有的值
            var selects = document.getElementById("edu");
            var edus = selects.getElementsByTagName("option");
            for (var i = 0; i < edus.length; i++) {
                alert(edus[i].value);
            }
        }

        function text4(){
            //输出下拉列表选中的值
            //根据select的ID值查找value
            //和web开发中获取下拉值的思想基本相似,web中通过select的name值查找下拉值
            var option1 = document.getElementById("edu");
            alert(option1.value);
        }

        function text4(){

        }
    </script>