`
chengyue2007
  • 浏览: 1489000 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

javascript select option 操作详解

JavaScriptHTML 
阅读更多

1 检测是否有选中
if(objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}

2.动态创建select

function createSelect(){

var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

3.添加选项option

function addOption(){

//根据id查找对象，
var obj=document.getElementById('mySelect');

//添加一个选项
obj.add(new Option("文本","值"));
}

4.删除所有选项option

function removeAll(){
var obj=document.getElementById('mySelect');

obj.options.length=0;

}

5.删除一个选项option

function removeOne(){
var obj=document.getElementById('mySelect');

//index,要删除选项的序号，这里取当前选中选项的序号

var index=obj.selectedIndex;
obj.options.remove(index);
}

6.获得选项option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

7.获得选项option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

8.修改选项option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

9.删除select

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

 

javascript select option对象

一、基础理解：

var e = document.getElementById("selectId");

 

e.options = new Option("文本", "值");    //创建一个option对象，即在<select>标签中创建一个或多个<option value="值">文本</option>。options是一个数组，里面可存放多个<option value="值">文本</option>标签。

 

1、options数组的属性：

length -------长度属性

selectedIndex ------ 当前被选中的文本的索引值，此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值，第二个文本值，第三个文本值，第四个文本值.......)

 

2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个<option>标签)：

text ===== 返回/指定文本

value =====返回/指定文本，与<option value="...">一致

index ======返回下标

selected======返回/指定该对象是否被选中，指定true or false可动态改变选中项

defaultSelected =====返回该对象默认是否被选中，true/false

 

3、option的方法：

增加一个<option>标签======obj.options.add(new("文本", "值"))

删除一个<option>标签======obj.options.remove(obj.selectedIndex);

获取一个<option>标签======obj.options[obj.selectedIndex].text ;

修改一个<option>标签======obj.options[obj.selectedIndex] = new Option("新文本", "值") ;

删除所有<option>标签======obj.options.length = 0 ;

获取一个<option>标签的值====obj.options[obj.selectedIndex].value ;

 

注意：

obj.option中的option不需要大写

new Option中的option需要大写

 

二、示例：

<html>   

<head>   

<script language="javascript">   

function chk(){   

var obj = document.getElementById("mySelect");   

        obj.options[obj.selectedIndex] = new Option("我的测试","4");//改变当前选中的文本

        //obj.options.add(new Option("我的测试","4"));//再添加一个option   

        //alert(obj.selectedIndex);//显示序号，option自己设置的   

     // obj.options[obj.selectedIndex].text = "我的测试";//更改值   

     //obj.remove(obj.selectedIndex);逐个删除   

     //obj.options.length = 0;//删除全部

     //t = obj.options[obj.selectedIndex].text;//获取文本

     //alert(t);

   

     //v = obj.options[obj.selectedIndex].value;//获取选中文本的值

    // alert(v);

}   

</script>   

</head>   

<body>   

<select id="mySelect">   

         <option value="1111">我的1111</option>   

         <option value="2222">我的2222</option>   

         <option value="3333">我的3333</option>   

         <option value="4444">我的4444</option>   

</select>   

<input type="button" name="button" value="查看结果" onclick="javascript:chk();">   

</body>   

</html>

分享到：
| windows远程桌面不用密码登陆
评论
发表评论

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

相关推荐

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时，经常需要检测用户是否已选择了某个 `&lt;select&gt;` 元素中的 `&lt;option&gt;` 项。以下是一个简单的示例来实现这一功能： ```javascript ...

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中，`&lt;select&gt;` 元素是一种常见的表单控件，用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript，我们可以实现...

    javascript options属性集合操作代码.docx

    ### JavaScript Options 属性集合操作详解 #### 一、概述 在网页开发中，`&lt;select&gt;` 元素常用于创建下拉列表，而 `&lt;option&gt;` 元素则用于定义下拉列表中的具体选项。通过 JavaScript 操作这些元素，开发者可以实现...

    jquery操作select大全

    ### jQuery操作Select大全知识点详解 #### 1. 概述 jQuery操作Select大全主要包含了一系列使用jQuery操作select下拉列表的方法和实例。在Web开发过程中，动态地与select元素进行交互是常见的需求，jQuery为此提供...

    JavaScript 多级联动select

    ### JavaScript 多级联动 Select 实现详解 在前端开发中，多级联动 Select 是一个常见的需求，尤其是在处理地区选择、分类导航等场景时。本文将深入解析如何利用原生 JavaScript 实现多级联动 Select，包括其核心...

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    js之Select用法

    2. **通过JavaScript操作`select`元素** - 获取`select`元素：可以使用`document.getElementById('mySelect')`或`document.querySelector('#mySelect')`来获取`select`元素。 - 添加/删除选项： - 添加选项：`...

    select 控件操作大全

    本文将详细介绍如何使用JavaScript进行 `&lt;select&gt;` 控件的各种操作。 #### 二、知识点详解 ##### 1. 判断 `select` 选项中是否存在 `value="paraValue"` 的 Item 为了检查 `&lt;select&gt;` 中是否存在特定 `value` 的...

    javascript 删除select中的所有option的实例

    本文将详细介绍如何使用JavaScript删除select元素中的所有option标签，并给出几种不同的实现方法。在Web开发过程中，经常需要动态地对select元素进行操作，例如清除已有选项，以适应不同的应用场景。正确地删除...

    jquery操作select详解(取值,设置选中)

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对`&lt;select&gt;`元素的操作。本文将详细解析如何使用jQuery来获取和设置`&lt;select&gt;`元素的值，以及如何设置选中项。 1. **设置value为...

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中，使得传统的单选...

    Select2的插件下载.zip

    **Select2插件详解** Select2是一款非常流行的JavaScript库，基于jQuery设计，它的主要目标是为HTML中的`&lt;select&gt;`元素提供一个强大的替代方案。在网页开发中，原生的`&lt;select&gt;`元素功能有限，样式单一，而Select2...

    jQuery中的select操作详解

    本篇文章将详细讲解jQuery如何操作`select`及其内部的`option`元素。 首先，`select`标签的HTML结构如下： ```html &lt;select class="xxx" id="yyy"&gt; &lt;option value=""&gt;&lt;/option&gt; ... &lt;option value=""&gt;&lt;/option&gt;...

    设置select

    在网页开发过程中，经常需要对页面中的元素进行动态操作，比如清除`&lt;select&gt;`下拉列表中的选项。本文将详细介绍如何使用JavaScript实现`select`清零，并深入探讨相关的知识点。 ### 一、基本概念 #### 1.1 `...

    JS、jQuery中select的用法详解

    本文将详细介绍如何使用JavaScript和jQuery来操作`select`元素。 ## JavaScript 中 select 的用法 ### 清除所有选项 ```javascript var obj = document.getElementById('selectid'); obj.options.length = 0; ``` ...

    javascript select 改变字的颜色

    ### JavaScript 实现 Select 改变文字颜色的知识点详解 #### 一、背景介绍 在网页开发过程中，有时候我们需要实现一种动态效果，即用户通过选择不同的选项来改变页面中某些元素的样式，比如字体颜色。本篇文章将...

    bootstrap-select下拉框

    在`bootstrap-select-1.10.0`这个压缩包中，包含了该插件的源码、CSS样式和JavaScript文件，开发者可以根据需求选择合适的版本进行引用。同时，为了实现特定功能或自定义样式，可以查阅官方文档以获取更多配置选项和...

    select-disabled-传值

    具体包括了如何通过JSP和JavaScript动态控制`select`元素的`disabled`属性，以及如何在表单提交前解除该属性以确保数据能够正确传递给服务器端。这种方法适用于多种应用场景，特别是在需要限制用户交互的同时保持...

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