讯享网

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>在DOM 之前&#xff0c;从一个选择框向另一个选择框移动选项是非常麻烦的&#xff0c;要先从第一个选择框移除选<br /> 项&#xff0c;然后以相同文本和值创建新选项&#xff0c;再将新选项添加到第二个选择框。DOM 方法则可以直接将某个<br /> 选项从第一个选择框移动到第二个选择框&#xff0c;只要对相应选项使用appendChild()方法即可。如果给这<br /> 个方法传入文档中已有的元素&#xff0c;则该元素会先从其父元素中移除&#xff0c;然后再插入指定位置。例如&#xff0c;下面的<br /> 代码会从选择框中移除第一项并插入另一个选择框&#xff1a;<br /> let selectbox1 &#61; document.getElementById(“selLocations1”);<br /> let selectbox2 &#61; document.getElementById(“selLocations2”);<br /> selectbox2.appendChild(selectbox1.options[0]);<br /> 移动选项和移除选项都会导致每个选项的index 属性重置。<br /> 重排选项非常类似&#xff0c;DOM 方法同样是**途径。要将选项移动到选择框中的特定位置&#xff0c;<br /> insertBefore()方法是最合适的。不过&#xff0c;要把选项移动到最后&#xff0c;还是appendChild()方法比较方便。<br /> 下面的代码演示了将一个选项在选择框中前移一个位置&#xff1a;<br /> let optionToMove &#61; selectbox.options[1];<br /> selectbox.insertBefore(optionToMove,<br /> selectbox.options[optionToMove.index-1]);<br /> 这个例子首先获得要移动选项的索引&#xff0c;然后将其插入之前位于它前面的选项之前&#xff0c;其中第二行代码<br /> 适用于除第一个选项之外的所有选项。下面的代码则可以将选项向下移动一个位置&#xff1a;<br /> let optionToMove &#61; selectbox.options[1];<br /> selectbox.insertBefore(optionToMove,<br /> selectbox.options[optionToMove.index&#43;2]);<br /> 以上代码适用于选择框中的所有选项&#xff0c;包括最后一个。<br /> 表单序列化<br /> 随着Ajax&#xff08;第21 章会进一步讨论&#xff09;的崭露头角&#xff0c;表单序列化&#xff08;form serialization&#xff09;已经成为一个常<br /> 见需求。表单在JavaScript 中可以使用表单字段的type 属性连同其name 属性和value 属性来进行序<br /> 列化。在写代码之前&#xff0c;我们需要理解浏览器如何确定在提交表单时要把什么发送到服务器。<br />  字段名和值是URL 编码的并以和号&#xff08;&amp;&#xff09;分隔。<br />  禁用字段不会发送。<br />  复选框或单选按钮只在被选中时才发送。<br />  类型为&#34;reset&#34;或&#34;button&#34;的按钮不会发送。<br />  多选字段的每个选中项都有一个值。<br />  通过点击提交按钮提交表单时&#xff0c;会发送该提交按钮&#xff1b;否则&#xff0c;不会发送提交按钮。类型为&#34;image&#34;<br /> 的元素视同提交按钮。<br />  元素的值是被选中元素的value 属性。如果元素没有value 属<br /> 性&#xff0c;则该值是它的文本。<br /> 表单序列化通常不包含任何按钮&#xff0c;因为序列化得到的字符串很可能以其他方式提交。除此之外其他<br /> 规则都应该遵循。最终完成表单序列化的代码如下&#xff1a;<br /> function serialize(form) {<br /> let parts &#61; [];<br /> let optValue;<br /> for (let field of form.elements) {<br /> switch(field.type) {<br /> case “select-one”:<br /> case “select-multiple”:<br /> if (field.name.length) {<br /> for (let option of field.options) {<br /> if (option.selected) {<br /> if (option.hasAttribute){<br /> optValue &#61; (option.hasAttribute(“value”) ?<br /> option.value : option.text);<br /> } else {<br /> optValue &#61; (option.attributes[“value”].specified ?<br /> option.value : option.text);<br /> }<br /> parts.push(encodeURIComponent(field.name)} &#43; “&#61;” &#43;<br /> encodeURIComponent(optValue));<br /> }<br /> }<br /> }<br /> break;<br /> case undefined: // 字段集<br /> case&#34;file&#34;: // 文件输入<br /> case “submit”: // 提交按钮<br /> case “reset”: // 重置按钮<br /> case “button”: // 自定义按钮<br /> break;<br /> case “radio”: // 单选按钮<br /> case “checkbox”: // 复选框<br /> if (!field.checked) {<br /> break;<br /> }<br /> default:<br /> // 不包含没有名字的表单字段<br /> if (field.name.length) {<br /> parts.push(‘{encodeURIComponent(field.value)}’);<br /> }<br /> }<br /> return parts.join(“&amp;”);<br /> }<br /> 这个serialize()函数一开始定义了一个名为parts 的数组&#xff0c;用于保存要创建字符串的各个部分。<br /> 接下来通过for 循环迭代每个表单字段&#xff0c;将字段保存在field 变量中。获得一个字段的引用后&#xff0c;再通<br /> 过switch 语句检测其type 属性。最麻烦的是序列化元素&#xff0c;包括单选和多选两种模式。在<br /> 遍历选择框的每个选项时&#xff0c;只要有选项被选中&#xff0c;就将其添加到结果字符串。单选控件只会有一个选项被<br /> 选中&#xff0c;多选控件则可能有零或多个选项被选中。同样的代码适用于两种选择类型&#xff0c;因为浏览器会限制可<br /> 选项的数量。找到选中项时&#xff0c;需要确定使用哪个值。如果不存在value 属性&#xff0c;则应该以选项文本代替&#xff0c;<br /> 不过value 属性为空字符串是完全有效的。为此需要使用DOM 合规的浏览器支持的hasAttribute()方法&#xff0c;而在IE8 及更早版本中要使用值的specified 属性。<br /> 表单中如果有元素&#xff0c;它就会出现在元素集合中&#xff0c;但应该没有type 属性。因此&#xff0c;如果<br /> type 属性是undefined&#xff0c;则不必纳入序列化。各种类型的按钮以及文件输入字段也是如此。&#xff08;文件输<br /> 入字段在提交表单时包含文件的内容&#xff0c;但这些字段通常无法转换&#xff0c;因而也要排除在序列化之外。&#xff09;对于<br /> 单选按钮和复选框&#xff0c;会检测其checked 属性。如果值为false 就退出switch 语句&#xff1b;如果值为true&#xff0c;<br /> 则继续执行default 分支&#xff0c;将字段的名和值编码后添加到parts 数组。注意&#xff0c;所有没有名字的表单字<br /> 段都不会包含在序列化结果中以模拟浏览器的表单提交行为。这个函数的最后一步是使用join()通过<br /> 和号把所有字段的名值对拼接起来。<br /> serialize()函数返回的结果是查询字符串格式。如果想要返回其他格式&#xff0c;修改起来也很简单。</p>