html select 方法

javascript之HTML（select option）详解

一、基础理解:

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

e. options= new Option("文本","值") ;

//创建一个option对象,即在标签中创建一个或多个文本

//options是个数组,里面可以存放多个文本这样的标签

1:options[ ]数组的属性:

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

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

2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个标签,是一个---)

text属性---------返回/指定 文本

value属性------返回/指定 值，与一致。

index属性-------返回下标,

selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项

defaultSelected 属性-----返回该对象默认是否被选中。true / false。

3:option的方法

增加一个标签-----obj.options.add(new("文本","值"));

删除一个标签-----obj.options.remove(obj.selectedIndex)

获得一个标签的文本-----obj.options[obj.selectedIndex].text

修改一个标签的值-----obj.options[obj.selectedIndex]=new

Option("新文本","新值")

删除所有标签-----obj.options.length = 0

HTML中select标签单选多选详解

转载自：/liyong199012/article/details/8161621

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name 属性。

一、基本用法：

Volvo

Saab

Opel

Audi

其中，标签可以省掉，在页面中用法

全部

湖北电大网络学习中心

成都师范学院网络学习中心

武汉职业技术学院网络学习中心

二、Select元素还可以多选，看如下代码：

//有multiple属性，则可以多选

高中

大学

博士

//下面没有multiple属性 , 只显示一条，不能多选

高中

大学

博士

//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。

小学

初中

高中

中专

大专

本科

研究生

博士

博士后

请选择

三、 多选Select组件涉及的所有常用操作：

1. 判断select选项中是否存在指定值的Item

@param objSelectId 将要验证的目标select组件的id

@param objItemValue 将要验证是否存在的值

function isSelectItemExit(objSelectId,objItemValue) {

var objSelect = document.getElementById(objSelectId);

改变HTML下拉框SELECT选项的多种方法

一、使用JavaScript:

1. 使用innerHTML属性改变SELECT选项:

通过JavaScript的innerHTML属性，可以直接改变SELECT元素的innerHTML，从而改变其中的选项。例如：

```html

选项1

选项2

选项3

改变选项

```

2. 使用createElement和appendChild方法动态添加选项:

可以使用JavaScript的createElement和appendChild方法，动态创建选项元素，并将其添加到SELECT元素中。例如：

```html

选项1

选项2

选项3

添加选项

```

二、使用CSS:

1. 使用display属性控制选项的显示和隐藏:

可以使用CSS的display属性，通过控制选项的display值，来改变选项的显示和隐藏。例如：

```html

选项1

选项2

选项3

``` 上述代码中，选项3的class属性设置为"hide-option"，通过CSS将其display属性设置为none，从而隐藏了该选项。

三、使用jQuery:

1. 使用append方法动态添加选项:

使用jQuery的append方法，可以动态添加选项元素到SELECT元素中。例如：

```html

选项1

选项2

添加选项

```

2. 使用remove方法删除选项: 使用jQuery的remove方法，可以删除指定的选项元素。例如：

```html

选项1

选项2

选项3

删除选项

```

以上是改变HTML下拉框SELECT选项的一些常见方法。通过这些方法，可以实现根据需求动态改变下拉框的选项内容。

html基础-form表单、input输⼊框、select选择框与⽂本框（⼆）

HTML标签：表单标签

概念：⽤于采集⽤户输⼊的数据的。⽤于和服务器进⾏交互

表单标签 form：

⽤于定义表单的。可以定义⼀个范围，范围代表采集⽤户数据的范围

form表单属性：

1）action：指定提交数据的URL

2）method:指定提交⽅式,分类：⼀共7种，2种⽐较常⽤

get：1.请求参数会在地址栏中显⽰。会封装到请求⾏中(HTTP协议后讲解)。

2.请求参数⼤⼩是有限制的。

3.不太安全。

post：1.请求参数不会再地址栏中显⽰。会封装在请求体中(HTTP协议后讲解)

2.请求参数的⼤⼩没有限制。

3.较为安全。

3）表单项中的数据要想被提交：必须指定其name属性

例⼦：

表单标签

⽤户名：

密码：

结果：

input标签：可以通过type属性值，改变元素展⽰的样式

label：指定输⼊项的⽂字描述信息， label的for属性⼀般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输⼊框获取焦点。语法格式：

⽤户名 ：

type属性：1）text：⽂本输⼊框，默认值；placeholder：指定输⼊框的提⽰信息，当输⼊框的内容发⽣变化，会⾃动清空提⽰信息

2）password：密码输⼊框 (密⽂显⽰)

3）radio:单选框 checked默认选中

*要想让多个单选框实现单选的效果，则多个单选框的name属性值必须⼀样。

*⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值

*checked属性，可以指定默认值

4）checkbox：复选框

*⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值

*checked属性，可以指定默认值

5) file：⽂件选择框

6) hidden：隐藏域，⽤于提交⼀些信息。

7）按钮：

submit：提交按钮。可以提交表单

button：普通按钮

image：图⽚提交按钮，src属性指定图⽚的路径