zoukankan      html  css  js  c++  java
  • javascript学习3---Js表单操作

     

    1.鼠标经过自动选择文本:

      Onmouseover=this.focus()

      Onfocus=this.select()

    2.对单选按钮的设置

      Function getChice(){

         Var oform = document.froms[myForm1];

         Var aChoices = oform.camera;

         For(var i=1i<aChoices.length;i++){

             If(aChoices[i].checked)

                 Break;

         alert(“你目前使用的相机是:”+ aChoices[i].value);

       }

      }

    3.对多选框的设置

       <input type=button value=”全选” onclick=changeBoxes(1);/>

       <input type=button value=”不选” onclick=changeBoxes(0);/>

       <input type=button value=”反选” onclick=changeBoxes(-1);/>

      

       Function changeBoxes(action){

          Var oform = document.forms[myForm1];

          Var ocheckBox = oform.hobby;

          For(var i=1i<aChoices.length;i++){

              If(action<0){

                   ocheckBox[i].checked=!ocheckBox[i].checked;

              }else{

                   ocheckBox[i].checked=action;          }

     

        }

    4.对下拉菜单的设置

       

    1 length        表示选项<option>个数

    2 selected      布尔值,表示选项<option>是否选中

    3

     SelectedIndex 被选中的序号,如果没有被选中的则为-1,对于多选下拉菜单而言,返回被选中的是第一个序号。从0开始的。

    4 text          选项的文本

    5 value         选项的value

    6 type          下拉菜单的类型。单选返回select-one,多选返回select-multiple

    7 options       获取选项的数组,例如oSelectBox.options[2]表示下拉菜单oSelectBoxd的第3

     

     

    一般情况下,下拉菜单有多选和单选,如果只有单选,则直接用SelectedIndex ,直接获得被选中的项,但是有多选的话就只能遍历真个列表了。如果是多选和单选的混合,为了效率,先判断是单选还是多选,如果是单选直接获得SelectedIndex ,这样省的遍历整个列表,提高效率。

     

    Js部分主要代码如下:

         <script language=”javascript”>

         Function getSelectValue(Box){

               Var oForm=document.forms[myForm1];

               Var oSelectBox = oForm.elements[Box];//根据参数获取下拉菜单

               If(oSelectBox.type==”select-one”){//判断是多选还是单选

                    Var ichoice = oSelectBox.oSelectBox.selectedIndex;//获取选中

                    Alert(“你选中的是”+ ichoice);

                }else{

                    Var achoices = new Array();

                    //遍历整个下拉菜单

                    For(var i=1;i<achoices.length;i++){

                       If(oSelectBox.option[i].selected)//如果被选中

                            achoices.push(oSelectBox.option[i].text);//压入数组

                        Alert(“你选中的是”+ achoices.join());//输出结果

     }

               

    }

         </script>

     

    下拉菜单的操作在大多数情况下还有添加,替换,删除选项的功能

    1.     增加需要new一个option如下:

    Var oOption = new Option(text,value,defaultSelected,selected);

    后两项默认值为0,如果不希望选中则可以忽略。添加时通常把第length项直接设置为选中。代码如下:

    <script language=”javascript”>

    Function AddOption(Box){

     Var oForm = document.forms[“myForm1”];

    Var oBox = oForm.elements[Box];

    Var oOption = new Option(“乒乓球”,”pingpang”);//new一个Option

    oBox.options[oBox.options.length]=oOption;//添加到下拉菜单

    }

    </script>

    2.     如果下拉菜单的序号是已经存在的选项,添加时会自动替换原来的选项,如:

       oBox.options[iNum]=oOption; //替换第iNum个选项

    3.     删除选项,就是把某项值赋为null。如下代码:

        oBox.options[iNum]=null; //删除achoicesiNum个选项

     

     

     

    5.提交表单:

          提交表单 可以直接用控件submit,也可以用submit()函数。

    a. Var oForm= document.forms[“myForm1”];

       oForm.submit();

    b.<input type=”button” value=”submit” onclick=”document.form[myForm1].submit();”/>

    c.<input type=”submit” value=”submit”>

     有很多时候防止重复提交,则这样写,如下:

    <input type=”button” value=”submit” onclick=”this.disabled=true;this.form.submit();”/>

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    【剑指offer】面试题40:数组中只出现一次的数字
    【剑指offer】面试题39扩展:平衡二叉树
    【剑指offer】面试题39:二叉树的深度
    【剑指offer】面试题38:数字在排序数组中出现的次数
    【剑指offer】面试题37:两个链表的第一个公共结点
    【剑指offer】面试题36:数组中的逆序对
    剑指Offer
    设计模式
    ACM
    算法设计与分析
  • 原文地址:https://www.cnblogs.com/alaricblog/p/3278298.html
Copyright © 2011-2022 走看看