表单对象和下拉框

最新推荐文章于 2020-11-17 14:26:25 发布

奔跑的蚂蚁2019

最新推荐文章于 2020-11-17 14:26:25 发布

阅读量287

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_41729404/article/details/86385962

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表单对象和下拉框

表单对象：

三种查找方法： submit（）方法 method属性 action属性

     // 第一种方法获取表单对象 ,通过id获取
         var oFrom = document.getElementById('fm');
     // 第二种方法获取， 通过name值获取
         var oFrom1 = document.frm;
     //第三种方法，forms属性集合获取，通过下标值
         var oFrom2 = document.forms[0];

获取内容

  var oFrom2 = document.forms[0];
      //获取form表单对象
      alert(oFrom2);
      // 获取form表单对象的method，action
      console.log(oFrom2.method , oFrom2.action);
      // 获取表单的用户名和密码
      console.log(oFrom2.username.value);
      console.log(oFrom2.password.value);

select 下拉框

selectedIndex
options

  <body>
  <select name="" id="sel">
      <option value="100">请选择</option>
      <option value="200">北京</option>
      <option value="300">上海</option>
      <option value="400">广州</option>
  </select>
  <script>
      var oSel = document.getElementById('sel');
      oSel.onchange = function () {
          // 获取选择项
          console.log(oSel.selectedIndex);
          // 获取全部的下拉框的内容
          console.log(oSel.options);
          // 获取下拉框的值 value
          console.log(oSel.options[oSel.selectedIndex].value);
          // 获取下拉框中选择的文本
          console.log(oSel.options[oSel.selectedIndex].innerText);
      }
  </script>
  </body>

完整demo代码：

 <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>表单对象和下拉框</title>
     </head>
     <body>
     <form action="1.php" method="post" id="fm" name="frm">
         <input name="username" type="text" value="goudan"><br/>
         <input type="password" name="password" value="123"><br/>
         <a href="https://www.baidu.com" onclick="return sub()">baidu</a>
         <input type="submit" value="提交">
     
     </form>
     <script>
         /**
          * 1. 表单对象：
          *      三种查找方法： submit（）方法   method属性   action属性
          * 2. select 下拉框
          *      selectedIndex
          *      options
          */
             // 第一种方法获取表单对象 ,通过id获取
             // var oFrom = document.getElementById('fm');
             // alert(oFrom);
             // // 第二种方法获取， 通过name值获取
             // var oFrom1 = document.frm;
             // alert(oFrom1);
             // //第三种方法，forms属性集合获取，通过下标值
         var oFrom2 = document.forms[0];
         //获取form表单对象
         // alert(oFrom2);
         // 获取form表单对象的method，action
         // console.log(oFrom2.method , oFrom2.action);
         // 获取表单的用户名和密码
         // console.log(oFrom2.username.value);
         // console.log(oFrom2.password.value);
         function sub() {
             oFrom2.submit();
             return false;
         }
     
     </script>
     </body>
     </html>

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>select 下拉框</title>
     </head>
     <body>
     <select name="" id="sel">
         <option value="100">请选择</option>
         <option value="200">北京</option>
         <option value="300">上海</option>
         <option value="400">广州</option>
     </select>
     <script>
         var oSel = document.getElementById('sel');
         oSel.onchange = function () {
             // 获取选择项
             console.log(oSel.selectedIndex);
             // 获取全部的下拉框的内容
             console.log(oSel.options);
             // 获取下拉框的值 value
             console.log(oSel.options[oSel.selectedIndex].value);
             // 获取下拉框中选择的文本
             console.log(oSel.options[oSel.selectedIndex].innerText);
         }
     </script>
     </body>
     </html>

奔跑的蚂蚁2019

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单对象和下拉框

表单对象和下拉框表单对象：三种查找方法： submit（）方法 method属性 action属性 // 第一种方法获取表单对象 ,通过id获取 var oFrom = document.getElementById('fm'); // 第二种方法获取，通过name值获取 var oFrom1 = document.frm; //第三种方法，f...
复制链接

扫一扫