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=1；i<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=1；i<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; //删除achoices第iNum个选项

 

 

 

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();”/>