一、选择框脚本

　　选择框也是表单的一个字段，是通过<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. java丢手帕 约瑟夫问题

    一.问题描述:     n个人围成一个圈,编号为1~n,从第一号开始报数,报到3的倍数的人离开,一直数下去,直到最后只有一个人,求此人编号. 二.问题提示:  使用一维数组,数组元素初始为1,从1开始 ...

  2. 基于Apache搭建Nagios图形监控

    基于apache 的稍微简单一点么?实验一下子就OK了... 环境: System: [root@losnau etc]# cat /etc/issueRed Hat Enterprise Linux ...

  3. IO之同步、异步、阻塞、非阻塞

    Stevens在文章中一共比较了五种IO Model:    blocking IO    nonblocking IO    IO multiplexing    signal driven IO  ...

  4. [iOS Animation]-CALayer 绘图效率

    绘图 不必要的效率考虑往往是性能问题的万恶之源. ——William Allan Wulf 在第12章『速度的曲率』我们学习如何用Instruments来诊断Core Animation性能问题.在构 ...

  5. CSharp笔记>>>多语言,注册

    C#多语言 方案1:http://blog.csdn.net/suncherrydream/article/details/43234059 http://blog.itpub.net/1263917 ...

  6. 单位冲击响应与频响以及FIR实现代码（C语言）（转）

    源:FIR数字滤波器C语言 1.单位冲击响应与频响 就如同之前所说的一样,使用下图所示的单位冲击响应,所设计的滤波器,是无法实现的. 现在,让我们看看其这个滤波器的频响.所谓频响,就是计算其单位冲击响 ...

  7. STM32驱动W25X64存储器

    W25X64 是华邦公司推出的大容量 SPI  FLASH 产品,W25X64 的容量为 64Mbit(8M),该系列还有 W25Q80/16/32 等.W25X16,W25X32,W25X64分别有 ...

  8. 简单介绍java Enumeration

    Enumeration接口 Enumeration接口本身不是一个数据结构.但是,对其他数据结构非常重要. Enumeration接口定义了从一个数据结构得到连续数据的手段.例如,Enumeratio ...

  9. windows Vista-Server 2016系列激活脚本.cmd

    @ECHO OFFTITLE Windows 全版本系统激活ECHO 检测 操作系统版本...SET RQR=REG QUERY "HKLM\SOFTWARE\Microsoft\Windo ...

  10. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...