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值
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!
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 ...
随机推荐
- android ndk编译x264开源(用于android的ffmpeg中进行软编码)
http://blog.csdn.net/u012917616/article/details/40921833 不废话,直接上.sh脚本: export NDK=/home/xxx/my_softw ...
- [转]移动web开发中meta标签作用
今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...
- testng环境设置
1.在eclipse中安装testng插件,地址:http://beust.com/eclipse 2.设置testng环境变量 testng_home D:\Program Files\eclips ...
- html5 实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...
- UESTC 882 冬马党 --状压DP
定义:dp[i][j]为状态为j时,第i行符合条件的状态数 转移方程:dp[i][j] += dp[i-1][t] //t为上一行状态,与当前行不冲突. 从第一行开始向下枚举,每次枚举当前行的状态 ...
- n个整数中，找出尽可能多的数使他们组成一个等差数列，求最长等差数列的长度
例子: 3,8,4,5,6,2 返回值应该为 :5 这是昨天做的一道优酷土豆的编程题,和leetcode中的128/ Longest Consecutive Sequence 有点 ...
- mac在xampp下使用yii2.0开发环境配置
在mac上装环境,折腾了我好久.先用是mac自带的php,但自带的PHP很多扩展都需要自己安装.libevent,memcache等扩展都安装好了之后,发现pdo_mysql.dll扩展又没有,悲剧的 ...
- java 14-3 正则表达式的分割
分割功能 String类的public String[] split(String regex) 根据给定正则表达式的匹配拆分此字符串. 例子: 可以用来做年龄段的筛选,比如说,我要筛选18-26之间 ...
- 程序清单 8-8 exec函数实例，a.out是程序8-9产生的可执行程序
/* ============================================================================ Name : test.c Author ...
- HTML5和css3的总结
简单的罗列一个HTML5的新东西,以后的几天里详细的过一遍一个挺有用的网站:www.css88.com [H5的新标签] 用之前的标签完全可以代替的:header footer aside atric ...