zoukankan      html  css  js  c++  java

  • javascript 处理表单元素

    一、通过表单name属性获取<form>表单的各元素　

     1 <form id="f1">
 2 　　<input type="text" tabindex="0" name="t1" value="输入内容" />
 3 　　<input type="radio" name="r1" value="1" />
 4 　　<input type="radio" name="r1" checked value="2" />
 5 　　<input type="radio" name="r1" value="3" />
 6 </form>
 7 
 8 <script>
 9 　　function getID(id){
10 　　　　return document.getElementById(id);
11 　　};
12 
13 　　var formID = getID("f1");
14 　　console.log(formID.t1.value); // 获取name="t1"的值
15 
16 　　// 获取相同name值的一组元素
17 　　console.log(formID.r1); // 返回的是一个数组节点
18 　　for(var i=0; i<formID.r1.length; i++){
19 　　　　if(formID.r1[i].checked){
20 　　　　alert(formID.r1[i].value);
21 　　　　}
22 　　}
23 </script>

     

    二、获取文本框的值

     1 <form id="f1">
 2 　　<input type="text" id="username" tabindex="0" name="t1" value="" />
 3 　　<input type="button" id="sendForm" value="提交" />
 4 </form>
 5 
 6 <script>
 7 　　function getID(id){
 8 　　　　return document.getElementById(id);
 9 　　};
10 
11 　　var text1 = getID("username");
12 　　var sendBtn = getID("sendForm");
13 
14 　　sendBtn.onclick = function(){
15 　　　　console.log(text1.value); // 获取文本元素的内容
16 　　}
17 </script>

    三、checkbox 多选元素的处理

     1 <form id="f1">
 2 　　<input type="checkbox" name="box1" value="1111" />1111
 3 　　<input type="checkbox" name="box1" value="2222" />2222
 4 　　<input type="checkbox" name="box1" value="3333" />3333
 5 　　<input type="checkbox" name="box1" value="4444" />4444
 6 　　<input type="button" id="sendForm" value="提交" />
 7 　　<input type="button" id="allBox" value="全选" />
 8 　　<input type="button" id="reverseBox" value="反选" />
 9 </form>
10 
11 <script>
12 　　function getID(id){
13 　　　　return document.getElementById(id);
14 　　};
15 
16 　　var f1 = getID("f1").box1;
17 　　var sendForm = getID("sendForm");
18 　　var allBox = getID("allBox");
19 　　var reverseBox = getID("reverseBox");
20 　　var setVal = ""
21 
22 　　// 提取选中的元素
23 　　sendForm.onclick = function(){
24 　　　　for(var i=0; i<f1.length; i++){
25 　　　　　　if(f1[i].checked){
26 　　　　　　　　setVal += f1[i].value + ",";
27 　　　　　　}
28 　　　　}
29 　　　　console.log(setVal)
30 　　};
31 
32 　　// 全选
33 　　allBox.onclick = function(){
34 　　　　for(var i=0; i<f1.length; i++){
35 　　　　　　f1[i].checked = true;
36 　　　　}
37 　　};
38 
39 　　// 反选
40 　　reverseBox.onclick = function(){
41 　　　　for(var i=0; i<f1.length; i++){
42 　　　　　　if(f1[i].checked){
43 　　　　　　　　f1[i].checked = false;
44 　　　　　　}
45 　　　　　　else{
46 　　　　　　　　f1[i].checked = true;
47 　　　　　　}
48 　　　　}
49 　　};
50 </script>

    四、radio 单选框处理

     1 <form id="f1">
 2 　　<input type="radio" name="r1" value="男" /> 男
 3 　　<input type="radio" name="r1" value="女" /> 女
 4 　　<input type="radio" name="r2" value="城市" /> 城市
 5 　　<input type="radio" name="r2" value="乡村" /> 乡村
 6 　　<input type="button" id="sendForm" value="提交" />
 7 </form>
 8 
 9 <script>
10 function getID(id){
11 　　return document.getElementById(id);
12 };
13 
14 var sex = getID("f1").r1;
15 var city = getID("f1").r2;
16 var sendForm = getID("sendForm");
17 var setR1 = "", setR2 = "";
18 
19 for(var i=0; i<sex.length; i++){　　// 侦听选择项并存储
20 　　sex[i].onclick = function(){
21 　　　　setR1 = this.value;
22 　　};
23 
24 　　city[i].onclick = function(){
25 　　　　setR2 = this.value;
26 　　}
27 }
28 
29 sendForm.onclick = function(){
30 　　if(setR1 === ""){
31 　　　　alert("请选择您的性别");
32 　　　　return false;
33 　　}
34 　　if(setR2 === ""){
35 　　　　alert("请选择所在的城市类型");
36 　　　　return false;
37 　　}
38 　　alert(setR1 + "," + setR2);
39 }
40 </script>

    五、<select> 菜单

     1 <form id="f1">
 2 　　<select id="sel"></select>
 3 　　<input type="button" id="sendForm" value="提交" />
 4 </form>
 5 
 6 <script>
 7 　　var banks = [{"bankCode":"ICBC","bankName":"中国工商银行","imgURL":"images/bankimg/gs.jpg"},{"bankCode":"CCB","bankName":"中国建设银行","imgURL":"images/bankimg/js.jpg"},{"bankCode":"ABC","bankName":"中国农业银行","imgURL":"images/bankimg/ny.jpg"},{"bankCode":"BOCO-NET-B2C","bankName":"交通银行","imgURL":"images/bankimg/jt.jpg"},{"bankCode":"CMBCHINA","bankName":"招商银行","imgURL":"images/bankimg/zs.jpg"},{"bankCode":"BOC","bankName":"中国银行","imgURL":"images/bankimg/zg.jpg"},{"bankCode":"CEB","bankName":"中国光大银行","imgURL":"images/bankimg/gd.jpg"},{"bankCode":"ECITIC-NET-B2C","bankName":"中信银行","imgURL":"images/bankimg/zx.jpg"},{"bankCode":"SPDB","bankName":"浦发银行","imgURL":"images/bankimg/pf.jpg"},{"bankCode":"CMBC","bankName":"中国民生银行","imgURL":"images/bankimg/ms.jpg"},{"bankCode":"CIB","bankName":"兴业银行","imgURL":"images/bankimg/xy.jpg"},{"bankCode":"GDB","bankName":"广发银行","imgURL":"images/bankimg/gf.jpg"}];
 8 
 9 function getID(id){
10 　　return document.getElementById(id);
11 };
12 
13 var sel = getID("sel");
14 var sendBtn = getID("sendForm");
15 
16 // 填加option元素
17 function addOption(){
18 　　var addOption = "";
19 　　for(var i=0; i<banks.length; i++){
20 　　　　addOption += "<option value='" + banks[i].bankCode + "'>" + banks[i].bankName + "</option>";
21 　　}
22 　　sel.innerHTML = addOption;
23 };
24 addOption();
25 
26 // 获取当前的焦点下标和选中的值
27 sel.onchange = function(){
28 　　var _index = sel.selectedIndex;
29 　　console.log("下标:" +_index);
30 　　var _val = sel.options[_index].value;
31 　　console.log("选中的值:" + _val);
32 }
33 </script>

    1、select默认是inline元素，你可以
     　　select
     　　{
      　　　　display:block;
     　　}


    2、默认select会选择第一项option，如果初始状态不选可以：
     　　jq写法： $("select").each(function(){this.selectedIndex=-1});
     
     　　或者干脆加个冗余option： 
    　　 <select>
      　　<option>请选择网站...</option>
      　　<option value="http://www.qq.com">腾讯网</option>
      　　<option value="http://www.163.com">网易</option>
      　　<option value="http://www.google.com">谷歌</option>
     　　</select>


    3、获取选择项的值：
    　　 <select id="ddlCities" onchange="alert(this.options[this.selectedIndex].value);">
      　　<option value="0">北京</option>
      　　<option value="1">济南</option>
      　　<option value="2">威海</option>
     　　</select>
     
     　　获取文本：  
     　　this.options[this.selectedIndex].text
     
    　　 更简洁的直接selectObj.value
     


    4、多选： 

     1 <select id="ddlCities" multiple="multiple" size="2">
     2     <option value="0">北京</option>
     3     <option value="1">济南</option>
     4     <option value="2">威海</option>
     5 </select>
     6 

     7 使用jq获取选择，仅测试所以写在标签上： 
    　　<select id="ddlCities" multiple="multiple" size="2" onchange="alert($(this).find('option:selected').text());">
     8     <option value="0">北京</option>
     9     <option value="1">济南</option>
    10     <option value="2">威海</option>
    11 </select>
    12 

    13 如果纯js写，需要循环了： 
    　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    14 <html xmlns="http://www.w3.org/1999/xhtml">
    15 <head>
    16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    17 <title>无标题文档</title>
    18 <style type="text/css">
    19 select
    20 {
    21 display:block;
    22 }
    23 </style><script type="text/javascript">
    24 function ddlCities_onchange(theSel){
    25     var arr=[];
    26     for(var i=0;i<theSel.options.length;i++){
    27         if(theSel.options[i].selected)
    28         arr.push(theSel.options[i].innerText);  
    29     }
    30     alert(arr.join());
    31 }
    32 </script>
    33 </head>
    34 
    35 <body>
    36 <select>
    37     <option>请选择网站...</option>
    38     <option value="http://www.qq.com">腾讯网</option>
    39     <option value="http://www.163.com">网易</option>
    40     <option value="http://www.google.com">谷歌</option>
    41 </select>
    42 
    43 <select id="ddlCities" multiple="multiple" size="2" onchange="ddlCities_onchange(this);">
    44     <option value="0">北京</option>
    45     <option value="1">济南</option>
    46     <option value="2">威海</option>
    47 </select>
    48 </body>
    49 </html>

     

    5、添加移除option:
     　　jq添加： $("<option value='3'>南京</option>").appendTo($("#ddlCities"));
     
     　　js写法：  
     　　var anOption = document.createElement_x("option");
     　　anOption.text="南京";
     　　anOption.value="4";
     　　document.getElementByIdx_x("ddlCities").options.add(anOption);
     　　或者

    　　 document.getElementByIdx_x("ddlCities").add(anOption);
  • 相关阅读:
    java native方法
    linux free命令
    gdb使用
    java锁——wait，notify，synchronized
    java面试——问题回溯
    （转）每天一个linux命令（44）：top命令
    java面试——jvm
    java面试——多线程
    数据库面试总结
    CMakeLists.txt使用
  • 原文地址：https://www.cnblogs.com/couxiaozi1983/p/3140224.html
Copyright © 2011-2022 走看看