表单处理[5]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9:42</title>
<script>
//跨浏览器添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}
//跨浏览器移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}
//跨浏览器阻止默认行为
function preDef(evt){
var e=evt||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
//跨浏览器获取目标对象
function getTarget(evt){
if(evt.target){ //W3C
return evt.target;
}else if(window.event.srcElement){ //IE
return window.event.srcElement;
}
}
//跨浏览器获取字符编码
function getCharCode(evt){
var e=evt||window.event;
if(typeof e.charCode=='number'){
return e.charCode;
}else {
return e.keyCode;
}
}
// 过滤输入模式：纯数字
// 1.禁止或屏蔽非数字键的输入，阻止非数字键的默认行为
// 2.验证后取消，你可以先输入非法字符，然后判断后，取消你刚输入的文本
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var city=fm.elements['city'];
//alert(city);
city.multiple=true;
city.size=5;
// alert(city.options);
//alert(city.options.length);
//alert(city.options[0]);
//alert(city.type); //多行 select-one单行，select-multiple多行
//alert(city.options[0].value+'---'+city.options[0].text);
//使用标准DOM也可以获取，不建议在表单中使用标准DOM，
//因为HTML DOM的兼容性已经非常好的，而且简单容易，并且好理解
//alert(city.options[0].firstChild.nodeValue+'---'+city.options[0].getAttribute('value'));
//alert(city.options[3].value); //当选项没有value值的时候，IE浏览器会返回空字符串，其它浏览器会返回text值
// addEvent(city,'change',function(){
//alert(this.selectedIndex);
//alert(this.options[this.selectedIndex].value+'---'+this.options[this.selectedIndex].text); //得到当前选项的text值和value值
// })
//这个定位必须在select对象上
//city.selectedIndex=3; //定位到某个选项上
//这个定位必须在option对象上
//city.options[1].selected=true;
// addEvent(city,'change',function(){
// if(this.options[2].selected){
// alert('正确');
// }else{
// alert('错误');
// }
// })
//标准DOM添加方法
// var option =document.createElement('option');
// var text=document.createTextNode('北京t');
// option.appendChild(text);
// option.setAttribute('value','北京v');
// city.appendChild(option);
//使用option构造函数添加
//var option=new Option('北京t','北京v');
//option.appendChild(option); //IE不兼容
//city.add(option,0); //0非IE浏览器会不兼容
//city.add(option,null); //null表示不存在的位置 IE不显示了
//PS：在DOM规定，add()中两个参数是必须的，如果不确定索引，那么第二个参数设置null即可，即默认移入最后一个选项。但IE中规定第二个参数是可选的，所以设置null表示存入不存在的位置，导致失踪，为了兼容性，我们传递undefined即可兼容。
//city.add(option,undefined); //最佳兼容方案，都兼容了
// 标准DOM移除
//city.removeChild(city.options[0]);
//都是使用自带的HTML DOM
city.remove(0);
city.remove(0);
city.remove(0);
//另一种方法
city.options[0]=null;
})
</script>
</head>
<body>
<form id="myForm" name="yourForm">
<select name="city" multiple="multiple" size="5">
<option value="上海v">上海t</option>
<option value="南京v">南京t</option>
<option value="盐城v">盐城t</option>
<option>无value</option>
</select>
</form>
</body>
</html>
--------------------------------------------------------------------------
从左侧列表点击移动到右侧列表
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var city=fm.elements['city'];
var info=fm.elements['info'];
addEvent(city,'click',function(){
info.appendChild(this.options[this.selectedIndex]);
})
})
<form id="myForm" name="yourForm">
<select name="city" multiple="multiple" size="5">
<option value="上海v">上海t</option>
<option value="南京v">南京t</option>
<option value="盐城v">盐城t</option>
<option>无value</option>
</select>
<select name="info" multiple="multiple" size="5">
<option>无</option>
</select>
</form>
----------------------------------------------------------------------
表单排序
addEvent(window,'load',function(){
var fm=document.getElementById('myForm');
var city=fm.elements['city'];
// alert(city.selectedIndex);
// alert(city.options[0].index);
var option1=city.options[1]; //得到的是南京对象
city.insertBefore(option1,city.options[option1.index-1]);
})
<form id="myForm" name="yourForm">
<select name="city">
<option value="上海v">上海t</option>
<option value="南京v">南京t</option>
<option value="盐城v">盐城t</option>
<option>无value</option>
</select>
</form>
