一、选择框脚本

　　选择框也是表单的一个字段，是通过<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的出现，表单序列化已经成了一种常见需求。在编写代码前，先来了解一下，浏览器是怎么样将数据发送给服务器的。

  1. 对表单字段的名称和值进行URL编码，并使用和号(&)进行分隔；
  2. 不发送禁用的表单字段；
  3. 只发送勾选的复选框和单选按钮；
  4. 不发送type为“reset”和“submit"的按钮；
  5. 多选框每一个选中的值为一个条目；
  6. 单击提交按钮提交表单时，也会发送提交按钮；否则，不发送提交按钮；也包含type为”image“的图片；
  7. select元素的值，就是选中的option元素的value属性值；如果没有value属性，则为option元素的文本值；

　　以下是表单序列化的函数：

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>

《JAVASCRIPT高级程序设计》选择框脚本和富文本编辑的更多相关文章

  1. JavaScript高级程序设计--表单脚本

    1.提交表单 submit onsubmit   2.表单的change事件 input与textarea元素的change事件触发在,他们失去焦点且value值改变的时候 select的change ...

  2. JavaScript高级程序设计之动态脚本及动态样式

    1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createEle ...

  3. Javascript高级编程学习笔记（79）—— 表单（7）选择框脚本

    选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...

  4. 《JavaScript高级程序设计》笔记：表单脚本（十四）

    表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...

  5. JavaScript高级程序设计第14章表单脚本 （学习笔记）

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  6. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  7. JavaScript高级程序设计（第4版）知识点总结

    介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...

  8. javascript高级程序设计第三版书摘

    在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...

  9. Javascript 高级程序设计--总结【四】

    *******************************  Chapter 11 DOM扩展  ******************************* 主要的扩展是 选择符API 和 H ...

随机推荐

  1. The 2014 ACM-ICPC Asia Regional Anshan

    继续复盘下一场Regional! [A]-_-/// [B]模拟(之前每次遇到模拟.暴搜都直接跳了,题目太长也是一个原因...下次是在不行可以尝试一下) [C]数论 互质.容斥? [D]数学推导(方差 ...

  2. 关联规则算法---Eclat算法

    Eclat算法 与fp-growth 和apriori算法不同,Eclat算法加入了倒排的思想,具体就是将事务数据中的项作为key,每个项对应的事务ID作为value. 原输入数据为 tid item ...

  3. CDOJ 1269 ZhangYu Speech

    预处理打表,sum[i][j]表示1.....i这些数字中 j 有几个.然后就很好处理询问了. #include<stdio.h> #include<math.h> #incl ...

  4. SQL复习四（完整性约束）

    完整性约束是为了表的数据的正确性.主要有主键,外键的约束. 1 主键 当某一列添加了主键约束后,该列的数据就不能重复出现.这样每行记录中其主键列就能唯一的标识着以行.如学生可以用学号作为唯一的标识. ...

  5. ZOJ 3931 Exact Compression

    题目看了半小时才看懂的. 题意:首先根据给出的序列,构造出哈夫曼树,构造出来的是一棵二叉树,每个节点都有一个权值,每个节点的两个儿子只能取一个,问能否使取出来的节点权值之和刚好等于e. 这样一分析就很 ...

  6. 51驱动LCD12864

    LCD12864与LCD1602最大的区别在于LCD12864可以显示汉字,同时也可以拿来画图;当然,作为图形显示不推荐lcd12864,推荐NOKIA5110 12864引脚基本和1602的引脚吻合 ...

  7. iOS8 UISearchViewController搜索功能讲解 分类： ios技术 2015-07-14 10:23 76人阅读 评论(0) 收藏

    在iOS8以前我们实现搜索功能需要用到UISearchbar和UISearchDisplayController, 在iOS8之后呢, UISearchController配合UITableView的 ...

  8. T4模板使用

    本例使用的数据库是Northwind 1.新建tt文本模板customer.tt 2. 修改customer.tt内容为 <#@ template debug="false" ...

  9. IOS开发－OC学习－MD5加密

    MD5的全称是Message-Digest Algorithm 5. MD5加密算法为现在应用最广泛的哈希算法之一,该算法广泛应用于互联网网站的用户文件加密,能够将用户密码加密为128位的长整数.数据 ...

  10. IOS开发之按钮控件Button详解

    reference:http://mxcvns.lofter.com/post/1d23b1a3_685d59d 首先是继承问题,UIButton继承于UIControl,而UIControl继承于U ...