JavaScript表单处理（下）

内容提纲：

1.文本框脚本

2.选择框脚本

发文不易，转载请亲注明链接出处，谢谢！

一．文本框脚本

在HTML中，有两种方式来表现文本框：

一种是单行文本框<input type="text">；

一种是多行文本框<textarea>。

虽然在HTML中<input>有value值，而<textarea>却没有，但在ＪＳ中都可以通过value获取他们的值。

var textField = fm.elements[0];

var areaField = fm.elements[1];

alert(textField.value + ',' + areaField.value); //得到value值

PS：使用表单的value是最推荐使用的，它是HTML DOM中的属性，不建议使用标准DOM的方法。也就是说不要使用getAttribute()获取value值。原因很简单，浏览器兼容有问题而且，对value属性的修改，不一定会反映在DOM中。

alert(areaField.getAttribute('value')); //兼容性会有问题，IE可以获取，非IE获取不到

alert(textField.getAttribute('value')); //标准DOM无法获取更改后的value

除了value值，还有一个属性对应的是defaultValue，可以得到原本的value值，不会因为值的改变而变化。

alert(textField.defaultValue); //得到最初的value值

选择文本

使用select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中。

textField.select(); //选中文本框中的文本

选择部分文本

在使用文本框内容的时候，我们有时要直接选定部分文本，这个行为还没有标准。Firefox的解决方案是：setSelectionRange()方法。这个方法接受两个参数：索引和长度。

textField.setSelectionRange(0,1); //选择第一个字符

textField.focus(); //焦点移入（这样可以修改里面的文本）

textField.setSelectionRange(0, textField.value.length); //选择全部

textField.focus(); //焦点移入

除了IE，其他浏览器都支持这种写法(IE9+支持)，那么IE想要选择部分文本，可以使用IE的范围操作。

var range = textField.createTextRange(); //创建一个文本范围对象

range.collapse(true); //将指针移到起点

range.moveStart('character', 0); //移动起点，character表示逐字移动

range.moveEnd('character', 1); //移动终点，同上

range.select(); //焦点选定

PS：关于IE范围这儿不详细讲解。并且W3C也有自己的范围。

PS：非IE从第N个到第M个位置，IE是从第N个开始选择M个。

//选择部分文本实现跨浏览器兼容

 function selectText(text, start, stop) {
 
        if (text.setSelectionRange) {
 
               text.setSelectionRange(start, stop);
 
               text.focus();
 
        } else if (text.createTextRange) {
 
               var range = text.createTextRange();
 
               range.collapse(true);
 
               range.moveStart('character', start);
 
               range.moveEnd('character', stop - start);              //IE用终点减去起点得到字符数
 
               range.select();
 
        }
 
 }

使用select事件，可以选中文本框文本后触发，得到文本框中的全部文本（取得选择的文本见下一部分）。

addEvent(textField, 'select', function () {

alert(this.value); //得到全部文本，IE事件需要传递this才可以这么写

});

取得选择的文本

如果我们想要取得选择的那个文本，就必须使用一些手段。目前为止，没有任何规范解决这个问题。Firefox为文本框提供了两个属性：selectionStart和selectionEnd。

addEvent(textField, 'select', function () {

alert(this.value.substring(this.selectionStart, this.selectionEnd));

});

除了IE，其他浏览器均支持这两个属性（IE9+已支持）。IE不支持，而提供了另一个方案：selection对象，属于document。这个对象保存着用户在整个文档范围内选择的文本信息。

//浏览器兼容

 function getSelectText(text) {
 
        if (typeof text.selectionStart == 'number') {  //非IE
 
               return text.value.substring(text.selectionStart, text.selectionEnd);
 
        } else if (document.selection) {                   //IE
 
               return document.selection.createRange().text;  //获取IE选择的文本
 
        }
 
 }

PS：有一个最大的问题，就是IE在触发select事件的时候，在选择一个字符后立即触发，而其他浏览器是选择想要的字符释放鼠标键后才触发。所以，如果使用alert()的话，导致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一，但可以通过不去使用alert()来解决。

addEvent(textField, 'select', function () {

//alert(getSelectText(this)); //导致用户行为结果不一致（不这样用）

document.getElementById('box').innerHTML = getSelectText(this); //this指代textField

});

综合小案例：

html代码部分：

 <body>
 
 <form id="myForm" name="yourForm">
 
        姓名：<input type="text" name="user" value="text" /><br />
 
        <p id="pox"></p>
 
        <textarea name="content">textarea</textarea>
 
 </form>
 
 </body>

JS代码部分：

 addEvent(window, 'load', function () {
 
        var fm = document.getElementById('myForm');
 
        var user = fm.elements['user'];
 
        var content = fm.elements['content'];
 
        //select 事件
 
        addEvent(user, 'select', function () {
 
               document.getElementById('pox').innerHTML = getSelectText(user);
 
        });
 
        function getSelectText(text) {
 
               if (typeof text.selectionStart == 'number') {
 
                      return text.value.substring(text.selectionStart, text.selectionEnd);
 
               } else if (document.selection) {
 
                      return document.selection.createRange().text;
 
               }
 
        }
 
 });

过滤输入

过滤输入的两种模式（以纯数字为例）：

禁止和屏蔽非数字键的输入，阻止非数字键的默认行为；
验证后取消，可以先输入非法字符，判断后取消非法字符文本。

法1：屏蔽非数字键输入

　　addEvent(areaField, 'keypress', function (evt) {

var e = evt || window.event;

var charCode = getCharCode(evt); // getCharCode()跨浏览器获取字符编码(事件对象篇)

if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 8) { //条件阻止默认

preDef(evt);

}

});

PS：前半段条件判断只有数字才可以输入，导致常规按键，比如光标键、退格键、删除键等无法使用。部分浏览器比如Firefox，需要解放这些键，而非字符触发的编码均为0；在Safari3之前的浏览器，也会被阻止，而它对应的字符编码全部为8，所以最后就加上charCode > 8的判断即可。

PS：当然，这种过滤还是比较脆弱的，我们还希望能够阻止裁剪、复制、粘贴和中文字符输入操作才能真正屏蔽掉这些。

如果要阻止裁剪、复制和粘贴，那么我们可以在剪贴板相关的事件上进行处理，JavaScript提供了六组剪贴板相关的事件：

事件名	说明
copy	在发生复制操作时触发
cut	在发生裁剪操作时触发
paste	在发生粘贴操作时触发
beforecopy	在发生复制操作前触发
beforecut	在发生裁剪操作前触发
beforepaste	在发生粘贴操作前触发

由于剪贴板没有标准，导致不同的浏览器有不同的解释。Safari、Chrome和Firefox中，凡是before前缀的事件，都需要在特定条件下触发。而IE则会在操作时之前触发带before前缀的事件。

如果我们想要禁用裁剪、复制、粘贴，那么只要阻止默认行为即可。

     addEvent(areaField, 'cut', function (evt) {           //阻止裁剪
 
               preDef(evt);
 
        });
 
        addEvent(areaField, 'copy', function (evt) {         //阻止复制
 
               preDef(evt);
 
        });
 
        addEvent(areaField, 'paste', function (evt) {        //阻止粘贴
 
               preDef(evt);
 
        });

PS：当我们裁剪和复制的时候，我们可以访问剪贴板里的内容，但问题是FireFox，Opera浏览器不支持访问剪贴板。并且，不同的浏览器也有自己不同的理解。所以，这里我们就不在赘述。

最后一个问题影响到可能会影响输入的因素就是：输入法。我们知道，中文输入法，它的原理是在输入法面板上先存储文本，按下回车就写入英文文本，按下空格就写入中文文本。

有一种解决方案是通过CSS来禁止调出输入法：

style="ime-mode:disabled" //CSS直接编写

areaField.style.imeMode = 'disabled'; //或在JS里设置也可以

PS：但Chrome浏览器却无法禁止输入法调出。所以，为了解决Chrome浏览器的问题，最好还要使用正则验证已输入的文本。

//法2：验证后取消（建议使用）

addEvent(areaField, 'keyup', function (evt) { //keyup弹起的时候

this.value = this.value.replace(/[^\d]/g, ''); //把非数字都替换成空

});

自动切换焦点

为了增加表单字段的易用性，很多字段在满足一定条件时(比如长度)，就会自动切换到下一个字段上继续填写。

 　　　　<input type="text" name="user1" maxlength="1" />   //只能写1个
 
        <input type="text" name="user2" maxlength="2" />   //只能写2个
 
        <input type="text" name="user3" maxlength="3" />   //只能写3个

 //自动切换焦点
 
 addEvent(fm.elements['a1'], 'keyup', tabForWard);
 
 addEvent(fm.elements['a2'], 'keyup', tabForWard);
 
 addEvent(fm.elements['a3'], 'keyup', tabForWard);
 
        function tabForward (evt) {                                     
 
               var e = evt || window.event;
 
               var target = getTarget(evt);
 
               //判断当前长度是否和指定长度一致
 
               if (target.value.length == target.maxLength) {    
 
 　　　　　　　　　　　　//遍历所有字段
 
                      for (var i =0; i < fm.elements.length; i ++) {
 
 　　　　　　　　　　　　　　　　//找到当前字段
 
                             if (fm.elements[i] == target) {
 
 　　　　　　　　　　　　　　　　　　//就把焦点移入下一个
 
                                    fm.elements[i + 1].focus();
 
 　　　　　　　　　　　　　　　　　　　　//中途返回
 
                                    return;           
 
                             }
 
                      }
 
               }
 
        }

二．选择框脚本

下面内容基于以下HTML代码：

 <body>
 
 <form id="myForm" name="yourForm">
 
        <select name="city">
 
               <option value="上海v">上海t</option>
 
               <option value="南京v">南京t</option>
 
               <option value="杭州v">杭州t</option>
 
               <option>无</option>
 
        </select>
 
 </form>

选择框是通过<select>和<option>元素创建的，除了通用的一些属性和方法外，HTMLSelectElement类型还提供了如下的属性和方法：

HTMLSelectElement对象

属性/方法	说明
add(new,rel)	插入新元素，并指定位置
multiple	布尔值，是否允许多项选择
options	<option>元素的HTMLColletion集合
remove(index)	移除给定位置的选项
selectedIndex	基于0的选中项的索引，如果没有选中项，则值为-1
size	选择框中可见的行数

在DOM中，每个<option>元素都有一个HTMLOptionElement对象，以便访问数据，这个对象有如下一些属性：

HTMLOptionElement对象

属性	说明
index	当前选项在options集合中的索引
label	当前选项的标签
selected	布尔值，表示当前选项是否被选中
text	选项的文本
value	选项的值

var city = fm.elements['city']; //HTMLSelectElement

alert(city.options); 　　//HTMLOptionsCollection

alert(city.options[0]); 　　 //HTMLOptionElement

alert(city.type); 　　 //select-one

PS：选择框里的type属性有可能是：select-one，也有可能是：select-multiple，这取决于HTML代码中有没有multiple属性。

标准DOM方法（不推荐）：

alert(city.options[0].firstChild.nodeValue); //上海t，获取text值，不推荐的做法

alert(city.options[0].getAttribute('value')); //上海v，获取value值，不推荐的做法

HTML DOM 方法（推荐）：

alert(city.options[0].text); //上海t，获取text值，推荐

alert(city.options[0].value); //上海v，获取value值，推荐

PS：操作select时，最好使用HTML DOM，因为所有浏览器兼容的很好。而如果使用标准DOM，会因为不同的浏览器导致不同的结果。

PS：当选项没有value值的时候，IE会返回空字符串，其他浏览器会返回text值。

选择选项

对于只能选择一项的选择框，使用selectedIndex属性最为简单。

addEvent(city, 'change', function () {

alert(this.selectedIndex); //得到当前选项的索引，从0开始

alert(this.options[this.selectedIndex].text); //得到当前选项的text值

alert(this.options[this.selectedIndex].value); //得到当前选项的value值

});

PS：如果是多项选择，他始终返回的是第一个项。

city.selectedIndex = 1; //设置selectedIndex可以定位到某个索引

通过option的属性(布尔值)selected，也可以设置某个索引，设置为true即可。

city.options[0].selected = true; //设置第一个索引

而selected（作用在option对象上）和selectedIndex（作用在select对象上）在用途上最大的区别是：selected是返回的布尔值，所以一般用于判断上；而selectedIndex是数值，一般用于设置和获取。

addEvent(city, 'change', function () {

if (this.options[2].selected == true) { //判断第三个选项是否被选定

alert('选择正确！');

}

});

添加选项

如需动态的添加选项我们有两种方案：标准DOM和Option构造函数。

使用标准DOM添加：

var option = document.createElement('option');

option.appendChild(document.createTextNode('北京t'));

option.setAttribute('value', '北京v')

city.appendChild(option);

使用Option构造函数添加：

　　var option = new Option('北京t', '北京v');

　　city.appendChild(option); //IE出现bug

使用add()方法来添加：

　　var option = new Option('北京t', '北京v');

　　city.add(option, 0); //0，表示添加到第一位

PS：DOM规定，add()中两个参数是必须的，如果不确定索引，那么第二个参数设置null即可，即默认移入最后一个选项。但IE中规定第二个参数是可选的，所以设置null表示放入不存在的位置，导致失踪，为了兼容性，我们传递undefined即可兼容。

city.add(option, null); //IE不显示了

city.add(option, undefined); //最佳兼容方案

移除选项

有三种方式可以移除某一个选项：DOM移除、remove()方法移除和null移除。

city.removeChild(city.options[0]); //DOM移除

city.remove(0); //remove()移除，推荐

city.options[0] = null; //null移除

PS：当第一项移除后，下面的项会自动往上移动，所以不停的移除第一项，即可全部移除。

移动选项

如果有两个选择框，把第一个选择框里的第一项移到第二个选择框里，并且第一个选择框里的第一项被移除。

var city = fm.elements['city']; //第一个选择框

var info = fm.elements['info']; //第二个选择框

info.appendChild(city.options[0]); //移动，自我删除

排列选项

选择框提供了一个index属性，可以得到当前选项的索引值，和selectedIndex的区别是，selectedIndex是选择框对象（select）的调用，index是选项对象（option）的调用。

var option1 = city.options[1];

city.insertBefore(option1, city.options[option1.index - 1]); //往下移动移位

单选按钮

通过checked属性来获取单选按钮的值。

for (var i = 0; i < fm.sex.length; i ++) { //循环单选按钮

if (fm.sex[i].checked == true) { //遍历每一个找出选中的那个

alert(fm.sex[i].value); //得到值

}

PS：除了checked属性之外，单选按钮还有一个defaultChecked属性，它获取的是原本的checked按钮对象，而不会因为checked的改变而改变。

if (fm.sex[i].defaultChecked == true) {

alert(fm.sex[i].value);

}

复选按钮

通过checked属性来获取复选按钮的值。复选按钮也具有defaultChecked属性。

var love = '';

for (var i = 0; i < fm.love.length; i ++) {

if (fm.love[i].checked == true) {

love += fm.love[i].value;

}

alert(love);

For my lover and

Thank you ,Mr.Lee!

---恢复内容结束---

内容提纲：

1.文本框脚本

2.选择框脚本

发文不易，转载请亲注明链接出处，谢谢！

一．文本框脚本

在HTML中，有两种方式来表现文本框：

一种是单行文本框<input type="text">；

一种是多行文本框<textarea>。

虽然在HTML中<input>有value值，而<textarea>却没有，但在ＪＳ中都可以通过value获取他们的值。

var textField = fm.elements[0];

var areaField = fm.elements[1];

alert(textField.value + ',' + areaField.value); //得到value值

alert(areaField.getAttribute('value')); //兼容性会有问题，IE可以获取，非IE获取不到

alert(textField.getAttribute('value')); //标准DOM无法获取更改后的value

除了value值，还有一个属性对应的是defaultValue，可以得到原本的value值，不会因为值的改变而变化。

alert(textField.defaultValue); //得到最初的value值

选择文本

使用select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中。

textField.select(); //选中文本框中的文本

选择部分文本

textField.setSelectionRange(0,1); //选择第一个字符

textField.focus(); //焦点移入（这样可以修改里面的文本）

textField.setSelectionRange(0, textField.value.length); //选择全部

textField.focus(); //焦点移入

除了IE，其他浏览器都支持这种写法(IE9+支持)，那么IE想要选择部分文本，可以使用IE的范围操作。

var range = textField.createTextRange(); //创建一个文本范围对象

range.collapse(true); //将指针移到起点

range.moveStart('character', 0); //移动起点，character表示逐字移动

range.moveEnd('character', 1); //移动终点，同上

range.select(); //焦点选定

PS：关于IE范围这儿不详细讲解。并且W3C也有自己的范围。

PS：非IE从第N个到第M个位置，IE是从第N个开始选择M个。

//选择部分文本实现跨浏览器兼容

 function selectText(text, start, stop) {
 
        if (text.setSelectionRange) {
 
               text.setSelectionRange(start, stop);
 
               text.focus();
 
        } else if (text.createTextRange) {
 
               var range = text.createTextRange();
 
               range.collapse(true);
 
               range.moveStart('character', start);
 
               range.moveEnd('character', stop - start);              //IE用终点减去起点得到字符数
 
               range.select();
 
        }
 
 }

使用select事件，可以选中文本框文本后触发，得到文本框中的全部文本（取得选择的文本见下一部分）。

addEvent(textField, 'select', function () {

alert(this.value); //得到全部文本，IE事件需要传递this才可以这么写

});

取得选择的文本

addEvent(textField, 'select', function () {

alert(this.value.substring(this.selectionStart, this.selectionEnd));

});

//浏览器兼容

 function getSelectText(text) {
 
        if (typeof text.selectionStart == 'number') {  //非IE
 
               return text.value.substring(text.selectionStart, text.selectionEnd);
 
        } else if (document.selection) {                   //IE
 
               return document.selection.createRange().text;  //获取IE选择的文本
 
        }
 
 }

addEvent(textField, 'select', function () {

//alert(getSelectText(this)); //导致用户行为结果不一致（不这样用）

document.getElementById('box').innerHTML = getSelectText(this); //this指代textField

});

综合小案例：

html代码部分：

 <body>
 
 <form id="myForm" name="yourForm">
 
        姓名：<input type="text" name="user" value="text" /><br />
 
        <p id="pox"></p>
 
        <textarea name="content">textarea</textarea>
 
 </form>
 
 </body>

JS代码部分：

 addEvent(window, 'load', function () {
 
        var fm = document.getElementById('myForm');
 
        var user = fm.elements['user'];
 
        var content = fm.elements['content'];
 
        //select 事件
 
        addEvent(user, 'select', function () {
 
               document.getElementById('pox').innerHTML = getSelectText(user);
 
        });
 
        function getSelectText(text) {
 
               if (typeof text.selectionStart == 'number') {
 
                      return text.value.substring(text.selectionStart, text.selectionEnd);
 
               } else if (document.selection) {
 
                      return document.selection.createRange().text;
 
               }
 
        }
 
 });

过滤输入

过滤输入的两种模式（以纯数字为例）：

禁止和屏蔽非数字键的输入，阻止非数字键的默认行为；
验证后取消，可以先输入非法字符，判断后取消非法字符文本。

法1：屏蔽非数字键输入

　　addEvent(areaField, 'keypress', function (evt) {

var e = evt || window.event;

var charCode = getCharCode(evt); // getCharCode()跨浏览器获取字符编码(事件对象篇)

if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 8) { //条件阻止默认

preDef(evt);

}

});

PS：当然，这种过滤还是比较脆弱的，我们还希望能够阻止裁剪、复制、粘贴和中文字符输入操作才能真正屏蔽掉这些。

如果要阻止裁剪、复制和粘贴，那么我们可以在剪贴板相关的事件上进行处理，JavaScript提供了六组剪贴板相关的事件：

事件名	说明
copy	在发生复制操作时触发
cut	在发生裁剪操作时触发
paste	在发生粘贴操作时触发
beforecopy	在发生复制操作前触发
beforecut	在发生裁剪操作前触发
beforepaste	在发生粘贴操作前触发

如果我们想要禁用裁剪、复制、粘贴，那么只要阻止默认行为即可。

     addEvent(areaField, 'cut', function (evt) {           //阻止裁剪
 
               preDef(evt);
 
        });
 
        addEvent(areaField, 'copy', function (evt) {         //阻止复制
 
               preDef(evt);
 
        });
 
        addEvent(areaField, 'paste', function (evt) {        //阻止粘贴
 
               preDef(evt);
 
        });

有一种解决方案是通过CSS来禁止调出输入法：

style="ime-mode:disabled" //CSS直接编写

areaField.style.imeMode = 'disabled'; //或在JS里设置也可以

PS：但Chrome浏览器却无法禁止输入法调出。所以，为了解决Chrome浏览器的问题，最好还要使用正则验证已输入的文本。

//法2：验证后取消（建议使用）

addEvent(areaField, 'keyup', function (evt) { //keyup弹起的时候

this.value = this.value.replace(/[^\d]/g, ''); //把非数字都替换成空

});

自动切换焦点

为了增加表单字段的易用性，很多字段在满足一定条件时(比如长度)，就会自动切换到下一个字段上继续填写。

 　　　　<input type="text" name="user1" maxlength="1" />   //只能写1个
 
        <input type="text" name="user2" maxlength="2" />   //只能写2个
 
        <input type="text" name="user3" maxlength="3" />   //只能写3个

 //自动切换焦点
 
 addEvent(fm.elements['a1'], 'keyup', tabForWard);
 
 addEvent(fm.elements['a2'], 'keyup', tabForWard);
 
 addEvent(fm.elements['a3'], 'keyup', tabForWard);
 
        function tabForward (evt) {                                     
 
               var e = evt || window.event;
 
               var target = getTarget(evt);
 
               //判断当前长度是否和指定长度一致
 
               if (target.value.length == target.maxLength) {    
 
 　　　　　　　　　　　　//遍历所有字段
 
                      for (var i =0; i < fm.elements.length; i ++) {
 
 　　　　　　　　　　　　　　　　//找到当前字段
 
                             if (fm.elements[i] == target) {
 
 　　　　　　　　　　　　　　　　　　//就把焦点移入下一个
 
                                    fm.elements[i + 1].focus();
 
 　　　　　　　　　　　　　　　　　　　　//中途返回
 
                                    return;           
 
                             }
 
                      }
 
               }
 
        }

二．选择框脚本

下面内容基于以下HTML代码：

 <body>
 
 <form id="myForm" name="yourForm">
 
        <select name="city">
 
               <option value="上海v">上海t</option>
 
               <option value="南京v">南京t</option>
 
               <option value="杭州v">杭州t</option>
 
               <option>无</option>
 
        </select>
 
 </form>

选择框是通过<select>和<option>元素创建的，除了通用的一些属性和方法外，HTMLSelectElement类型还提供了如下的属性和方法：

HTMLSelectElement对象

属性/方法	说明
add(new,rel)	插入新元素，并指定位置
multiple	布尔值，是否允许多项选择
options	<option>元素的HTMLColletion集合
remove(index)	移除给定位置的选项
selectedIndex	基于0的选中项的索引，如果没有选中项，则值为-1
size	选择框中可见的行数

在DOM中，每个<option>元素都有一个HTMLOptionElement对象，以便访问数据，这个对象有如下一些属性：

HTMLOptionElement对象

属性	说明
index	当前选项在options集合中的索引
label	当前选项的标签
selected	布尔值，表示当前选项是否被选中
text	选项的文本
value	选项的值

var city = fm.elements['city']; //HTMLSelectElement

alert(city.options); 　　//HTMLOptionsCollection

alert(city.options[0]); 　　 //HTMLOptionElement

alert(city.type); 　　 //select-one

PS：选择框里的type属性有可能是：select-one，也有可能是：select-multiple，这取决于HTML代码中有没有multiple属性。

标准DOM方法（不推荐）：

alert(city.options[0].firstChild.nodeValue); //上海t，获取text值，不推荐的做法

alert(city.options[0].getAttribute('value')); //上海v，获取value值，不推荐的做法

HTML DOM 方法（推荐）：

alert(city.options[0].text); //上海t，获取text值，推荐

alert(city.options[0].value); //上海v，获取value值，推荐

PS：操作select时，最好使用HTML DOM，因为所有浏览器兼容的很好。而如果使用标准DOM，会因为不同的浏览器导致不同的结果。

PS：当选项没有value值的时候，IE会返回空字符串，其他浏览器会返回text值。

选择选项

对于只能选择一项的选择框，使用selectedIndex属性最为简单。

addEvent(city, 'change', function () {

alert(this.selectedIndex); //得到当前选项的索引，从0开始

alert(this.options[this.selectedIndex].text); //得到当前选项的text值

alert(this.options[this.selectedIndex].value); //得到当前选项的value值

});

PS：如果是多项选择，他始终返回的是第一个项。

city.selectedIndex = 1; //设置selectedIndex可以定位到某个索引

通过option的属性(布尔值)selected，也可以设置某个索引，设置为true即可。

city.options[0].selected = true; //设置第一个索引

addEvent(city, 'change', function () {

if (this.options[2].selected == true) { //判断第三个选项是否被选定

alert('选择正确！');

}

});

添加选项

如需动态的添加选项我们有两种方案：标准DOM和Option构造函数。

使用标准DOM添加：

var option = document.createElement('option');

option.appendChild(document.createTextNode('北京t'));

option.setAttribute('value', '北京v')

city.appendChild(option);

使用Option构造函数添加：

　　var option = new Option('北京t', '北京v');

　　city.appendChild(option); //IE出现bug

使用add()方法来添加：

　　var option = new Option('北京t', '北京v');

　　city.add(option, 0); //0，表示添加到第一位

city.add(option, null); //IE不显示了

city.add(option, undefined); //最佳兼容方案

移除选项

有三种方式可以移除某一个选项：DOM移除、remove()方法移除和null移除。

city.removeChild(city.options[0]); //DOM移除

city.remove(0); //remove()移除，推荐

city.options[0] = null; //null移除

PS：当第一项移除后，下面的项会自动往上移动，所以不停的移除第一项，即可全部移除。

移动选项

如果有两个选择框，把第一个选择框里的第一项移到第二个选择框里，并且第一个选择框里的第一项被移除。

var city = fm.elements['city']; //第一个选择框

var info = fm.elements['info']; //第二个选择框

info.appendChild(city.options[0]); //移动，自我删除

排列选项

var option1 = city.options[1];

city.insertBefore(option1, city.options[option1.index - 1]); //往下移动移位

单选按钮

通过checked属性来获取单选按钮的值。

for (var i = 0; i < fm.sex.length; i ++) { //循环单选按钮

if (fm.sex[i].checked == true) { //遍历每一个找出选中的那个

alert(fm.sex[i].value); //得到值

}

PS：除了checked属性之外，单选按钮还有一个defaultChecked属性，它获取的是原本的checked按钮对象，而不会因为checked的改变而改变。

if (fm.sex[i].defaultChecked == true) {

alert(fm.sex[i].value);

}

复选按钮

通过checked属性来获取复选按钮的值。复选按钮也具有defaultChecked属性。

var love = '';

for (var i = 0; i < fm.love.length; i ++) {

if (fm.love[i].checked == true) {

love += fm.love[i].value;

}

alert(love);

For my lover and

Thank you ,Mr.Lee!

JavaScript表单处理（下）的更多相关文章

JavaScript表单处理（上）
为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 发文不易,转载请亲注明出处,谢谢! 一．表单介绍在HTML中,表单是由<form& ...
第一百二十二节，JavaScript表单处理
JavaScript表单处理学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一． ...
JavaScript表单验证和正则表达式
JavaScript表单验证分为四类: 1.非空验证常用于用户名等 2.相等验证常用于验证两次输入的密码 3.范围验证常用于年龄等 4.正则验证用于手机号,邮箱号等以下是实例: <! ...
JavaScript表单
JavaScript表单这篇文章的主要目的是介绍表单相关的知识,如表单基础知识.文本框脚本相关用法.选择框脚本相关用法以及等知识.虽然在现代web开发中,很少会使用form默认行为提交表单数据,而是 ...
JavaScript 表单验证案例
JavaScript 表单验证案例版权声明:未经授权,严禁转载! 编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...
JavaScript 表单验证正则表达式大全
JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了匹配双字节字符(包括汉字在内):[ ...
推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
JavaScript表单提交四种方式
总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...
JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

随机推荐

PHP Cannot redeclare class CLassName
可能导致Cannot redeclare class CLassName错误的原因: 1.在同一个文件中重复声明了两次同名的类: class Extend {} class Extend {} new ...
centos6.7 安装Docker
一.查看系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS release 6.7 (Final) 二.安装EPEL 1.进入cento ...
绘制复数图形和双y轴图形
clearclct=0:0.1:2*pi;x=sin(t);y=cos(t);z=x+i*y;subplot(1,3,1)plot(t,z,'r') %注:这种方式下,不论参数t,z哪个是复数,都将忽 ...
ffmpeg编译x264, 这个libffmpeg即可解码又可以h264编码
http://blog.csdn.net/u012917616/article/details/40921861 不废话,直接上.sh脚本: export NDK=/home/xxx/my_sof ...
div中的内容垂直居中的五种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
leetcode: Path Sum II 迭代法
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
eclipse点击一个变量使相同名称变量高亮显示的方法
preferences->java->Editor->Mark Occurences 选择最上的复选框,下面的就有很多了. 其中的Local variables就是变量的高亮显示.
java 13-2 Arrays工具类
1.Arrays:针对数组进行操作的工具类.比如说排序和查找. 1:public static String toString(int[] a) 把数组转成字符串 2:public static v ...
Netty关闭客户端
在启动客户端的时候,我们一般会 channelFuture.channel().closeFuture().sync(); 这是一段阻塞的代码,除非链路断了,否则是不会终止的,我们可以在handler ...
mac上一键配置和安装adb驱动或者环境
最近才使用的mac,老实说mac上要配置adb的环境不那么复杂,但是还是会让一些心不细或者动手能力不强的同学望而却步.那么到底有没有一个一键完成mac上adb和fastboot环境搭配的软件或者脚本呢 ...

JavaScript表单处理（下）

JavaScript表单处理（下）的更多相关文章

随机推荐

热门专题