标签：
一、选择框脚本
选择框也是表单的一个字段，是通过<select>和<option>元素来创建的，需要使用javascript来控制。选择框拥有以下的属性和方法：
以下介绍一些选择框的常用方法：
1、获取选择项
var selectbox = document.forms[0].elements["selectID"]; // 选择第0项的值和文本 var text = selectbox.options[0].text; var value = selectbox.options[0].value; //选择选项框某一项的值并显示 var selectedIndex = selectbox.selectedIndex; var selectedOption = selectbox.options[selectedIndex]; alert("selected index: "+selectedIndex + "\nselected text:"+selectedOption.text+"\nselected value" + selectedOption.value); // 循环遍历取得每一项的值并返回 function getSelectedOptions(selectbox){ var result = new Array(); var option = null; for(var i = 0, len = selectbox.options.length; i < len){ option =selectbox.options[i]; if(option.selected){ result.push(option); } } return result; }
2、增/删/移动
//增：
// 使用javascript的dom方式来添加一个option元素（不推荐） var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "option value"); selectbox.appendChild(newOption); // 使用选择框的add方法来添加一个option元素（推荐） var newOption = new Option("Option text", "Option value"); selectbox.add(newOption, undefined);
//删：
// 使用javascript的dom方法来移除第一个option selectbox.removeChild(selectbox.options[0]); // 使用选择框的remove方法来移除第一个option selectbox.remove(0); // 清除选择框中的所有项 function clearSelectBox(selectbox){ for(var i = 0, len = selectbox.options.length; i < len; i++){ selectbox.remove(i); } }
//移动：
// 把某一项向前移动一个位置 var optionToMove = selectbox.options[1]; selectbox.insertBefore(optionToMove, selectbox.options[optionTomove - 1]); // 把某一项向后移动一个位置 selectbox.insertBefore(optionToMove, selectbox.options[optionTomove +2]);
二、表单序列化
随着Ajax的出现，表单序列化已经成了一种常见需求。在编写代码前，先来了解一下，浏览器是怎么样将数据发送给服务器的。
以下是表单序列化的函数：
function serialize(form){ var parts = []; field = null, i, len, j, optLen, option, optValue; for(i=0, len=form.elements.length; i<len; i++){ field = form.elements[i]; switch(field.type){ case "select-one": case "select-multiple": if(field.name.length){ for(j=0, optLen=field.options.length; j<optLen; j++){ option = field.options[j]; if(option.selected){ optValue = ""; if(option.hasAttribute){ // DOM兼容的浏览器，可以使用hasAttribute方法 optValue = (option.hasAttribute("value") ? option.value:option.text); }else{ // 兼容IE浏览器 optValue = (option.attribute["value"].specified ? option.value:option.text); } parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue)); } } } case undefined://type属性未定义，则不需要进行序列化 case "file"://文件输入 case "submit": case "reset": case "button"://自定义按钮 break; //以上按钮和文字输入的字段无法模仿，也不需要序列化 case "radio"://单选按钮 case "checkbox"://复选框 if(!field.checked){ break; // 如果单选和复选框的checked属性被设置为false，则不需要序列化 } default; if(field.name.length){ parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value)); } } } return parts.join("&"); }
三、富文本编辑
富文本编辑，又称WYSIWYG(what you see is what you get，所见即所得)。javascript通过以下两种方式，实现了在网页中编辑文本内容。
1、使用iframe让加载的iframe的内容可编辑
新建一个index.html：
<!doctype html> <html> <head> <title></title> </head> <body> hello world </body> </html>
在建立一个html并执行（把这两个html都放在同一个域下，这里把这两个文件都放在本地的服务器上的）：
<!doctype html> <html> <head> <title></title> </head> <body> <iframe name="richEdit" style="height:400px;width:400px;" src="http://127.0.0.1/index.html" frameborder="2"></iframe> <script> // 要让iframe的内容可编辑，需要将designMode属性设置为on window.addEventListener("load", function(){ frames["richEdit"].document.designMode = "on"; }); </script> </body> </html>
2、使用contentEditable属性让div可编辑
<!doctype html> <html> <head> <title></title> </head> <body> <!-- 为元素设置contenteditable属性 --> <div id="richedit" contenteditable>1111</div> <script> var div = document.getElementById("richedit"); // 将属性开关打开 div.contentEditable = "true"; </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/bluebirid/p/5747358.html
