`
simgsg
  • 浏览: 96023 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JS操作SELECT表单大全，赋默认值，取值，增，删等

 
阅读更多
<p>在下面所有代码前最好加上这句：</p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> selectId<span style="color: #339933;">=</span>document.<span style="color: #660066;">getElemengById</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'selectId'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">清空select的项</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;">selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> <span style="color: #cc0000;">0</span><span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">如果留下第一行的话就是</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;">selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> <span style="color: #cc0000;">1</span><span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">向select选项中 加入一个Option</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
2
3
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> varOption <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Option<span style="color: #009900;">(</span>objOptionText<span style="color: #339933;">,</span>objOptionValue<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> varOption<span style="color: #339933;">;</span>
<span style="font-style: italic; color: #006600;">//或selectId.options.add(varOption);</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">从select选项中 删除一个Option</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
2
3
4
5
6
7
8
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;"> <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">)</span>
<span style="color: #009900;">{</span>
     <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">value</span> <span style="color: #339933;">==</span> objOptionValue<span style="color: #009900;">)</span>
     <span style="color: #009900;">{</span>
         selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">(</span>i<span style="color: #009900;">)</span><span style="color: #339933;">;</span>
         <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
     <span style="color: #009900;">}</span>
<span style="color: #009900;">}</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">设置select中text=”paraText”的第一个Option为选中</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
2
3
4
5
6
7
8
9
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;">     <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #cc0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>selectId.<span style="color: #660066;">options</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">)</span>
     <span style="color: #009900;">{</span>
         <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">text</span> <span style="color: #339933;">==</span> objOptionText<span style="color: #009900;">)</span>
         <span style="color: #009900;">{</span>
             selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">selected</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
             isExit <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
             <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
         <span style="color: #009900;">}</span>
     <span style="color: #009900;">}</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">设置select中value=”paraValue”的Option为选中</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;">selectId.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> objOptionValue<span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">得到select的当前选中项的value</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> currSelectValue <span style="color: #339933;">=</span> selectId.<span style="color: #660066;">value</span><span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">得到select的当前选中项的text</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> currSelectText <span style="color: #339933;">=</span> selectId.<span style="color: #660066;">options</span><span style="color: #009900;">[</span>selectId.<span style="color: #660066;">selectedIndex</span><span style="color: #009900;">]</span>.<span style="color: #660066;">text</span><span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
<p><br><span style="color: #ff0000;">得到select的当前选中项的Index</span></p>
<div class="wp_syntax">
<table border="0"><tbody><tr>
<td class="line_numbers">
<pre>1
</pre>
</td>
<td class="code">
<pre class="javascript" style="font-family: monospace;"><span style="color: #003366; font-weight: bold;">var</span> currSelectIndex <span style="color: #339933;">=</span> selectId.<span style="color: #660066;">selectedIndex</span><span style="color: #339933;">;</span></pre>
</td>
</tr></tbody></table>
</div>
分享到：
| Android环境搭建_转载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    layui-多选下拉框-xm-select-demo源码

    1. 引入layui库和xm-select插件的CSS及JS文件，确保页面头部正确加载。 2. 在HTML中创建基本的select元素，设置必要的属性，如id、name、多选属性等。 3. 使用layui的API初始化xm-select组件，通过配置项调整组件的...

    JavaScript笔记

    - `&lt;select&gt;`：下拉列表。 - `multiple`：是否允许多选。 - `&lt;option&gt;`：列表项。 - `value`：选项的值。 - `&lt;label&gt;`：标签，用于描述表单控件。 - `&lt;button&gt;`：按钮。 - `type`：指定按钮类型，如`submit`...

    VisualFoxPro题库.pdf

    【知识点详解】 1. VisualFoxPro 是一种关系数据库管理系统，...以上是对 Visual FoxPro 题库中涉及知识点的详细解释，涵盖了变量类型、表设计、SQL 查询、数据库操作、程序文件扩展名、数组、对象属性等多个方面。

    jqgrid插件相关说明

    jqGrid 是一款基于 jQuery 的表格插件，具有强大的功能，能够实现复杂的数据展示和操作。它不仅支持数据的排序、分页、过滤等基本功能，还提供了自定义列、行编辑等功能，使其成为 Web 应用开发中一个非常重要的组件...

    html入门到放弃笔记

    2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接，内容为 ：学子商城，点击时，在自身标签页中 打开 http://www.codeboy.com 2、创建一个超链接，内容为 ：学子商城的LOGO，点击时，在新...

    asp在线考试系统 基于B/S

    同时，还要注意前端JavaScript是否影响了下拉框的显示和交互，例如验证、默认值设置等功能。 在ASP中，可以使用ADO（ActiveX Data Objects）与数据库进行交互，创建记录集对象来获取数据，然后通过循环遍历记录集，...

    2021-2022计算机二级等级考试试题及答案No.15677.docx

    在计算机二级等级考试中，考生需要掌握多种IT知识，包括办公软件的应用、数据库管理、编程语言的基本概念以及网络和操作系统的基础知识。以下是对题目中涉及知识点的详细说明： 1. **Word页码插入**：在Microsoft ...

    ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法

    本文将详细介绍如何在***中使用这三个控件进行取值和赋值操作，并说明它们的呈现形式如何通过属性进行控制。 首先，我们来了解这些控件的基本功能。RadioButtonList控件用于创建单选按钮列表，允许用户在多个选项中...

    2021-2022计算机二级等级考试试题及答案No.12191.docx

    - **JAVA与JavaScript的区别**：虽然二者名字相似，但它们是完全不同的编程语言，JavaScript主要用于网页交互。 #### 6. 循环结构 - `do`循环至少会被执行一次，即使条件一开始就不满足。 #### 7. 指针变量 - 定义...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    Html笔记.txt

    - `size`：设置文本大小，取值范围为1到7，默认值为3。 - `face`：设置文本字体。 #### 图像标签 - `&lt;img&gt;`：图像标签，用于在页面中插入图片。 - `src`：图片源地址。 - `width`：图片宽度。 - `height`：...

    2021-2022计算机二级等级考试试题及答案No.14438.docx

    `导入包可以让我们在程序中创建输入/输出流对象，处理文件读写等I/O操作。 13. **Java 类方法调用**：在Java中，可以通过类名直接调用静态方法，如`A.f(3)`；也可以通过实例调用非静态方法，如`a1.g(2,5)`。因此，...

    PHP开发中常用的8个小技巧

    6. **表单取值**： 根据表单提交方式，使用`$_GET`或`$_POST`获取表单字段值。例如，`$_GET['test']`和`$_POST['test']`分别对应GET和POST提交方式下的`test`字段。 7. **获取客户端IP地址**： 通过`$_SERVER['...

    excel-vb常用词汇252个

    `Byte`数据类型用于存储8位无符号整数，取值范围为0到255。 #### Call 调用，呼叫 `Call`关键字用于调用子程序或函数。例如，`Call MySub`用于调用名为MySub的子程序。 #### Cancel 取消 `Cancel`通常用于取消某个...

    java_web_编程人员必会的综合测试题

    8. HTML表单可以包含多种输入方式，如文本输入框（`&lt;INPUT type="text"&gt;`）、下拉式列表（`&lt;SELECT&gt;`）、单选框（`&lt;INPUT type="radio"&gt;`）和多选框（`&lt;INPUT type="checkbox"&gt;`）。正确答案是A、文本输入框, B、...

Magicbox
Global site tag (gtag.js) - Google Analytics