HTML中的标签如何设置默认选中的选项-百度网盘下载-Java学习者论坛

admin · 发表于 2018-7-5 16:59:12

方法有两种。
第一种通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。



   1

   2

   3

   4

   5

<

复制代码

select

复制代码

id

复制代码

=

复制代码

"sel"

复制代码

>

复制代码

<

复制代码

option

复制代码

value

复制代码

=

复制代码

"1"

复制代码

>1</

复制代码

option

复制代码

>

复制代码

<

复制代码

option

复制代码

value

复制代码

=

复制代码

"2"

复制代码

selected

复制代码

=

复制代码

"selected"

复制代码

>2</

复制代码

option

复制代码

>

复制代码

<

复制代码

option

复制代码

value

复制代码

=

复制代码

"3"

复制代码

>3</

复制代码

option

复制代码

>

复制代码

</

复制代码

select

复制代码

>

复制代码

第二种为通过前端js来控制选中的项: 由 www.169it.com 搜集整理



   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

<

复制代码

script

复制代码

type

复制代码

=

复制代码

"text/javascript"

复制代码

>

复制代码

function change(){

复制代码

document.getElementById("sel")[2].selected=true;

复制代码

}

复制代码

</

复制代码

script

复制代码

>

复制代码

<

复制代码

select

复制代码

id

复制代码

=

复制代码

"sel"

复制代码

>

复制代码

<

复制代码

option

复制代码

value

复制代码

=

复制代码

"1"

复制代码

>1</

复制代码

option

复制代码

>

复制代码

<

复制代码

option

复制代码

value

复制代码

=

复制代码

"2"

复制代码

>2</

复制代码

option

复制代码

>

复制代码

<

复制代码

option

复制代码

value

复制代码

=

复制代码

"3"

复制代码

>3</

复制代码

option

复制代码

>

复制代码

</

复制代码

select

复制代码

>

复制代码

<

复制代码

input

复制代码

type

复制代码

=

复制代码

"button"

复制代码

value

复制代码

=

复制代码

"修改"

复制代码

onclick

复制代码

=

复制代码

"change()"

复制代码

/>

复制代码

获取<select>标签选中项文本的js代码为:



   1

   2

var

复制代码

val = document.all.Item.options[document.all.Item.selectedIndex].text

复制代码

var

复制代码

i=document.getElementById(

复制代码

"sel"

复制代码

).options[document.getElementById(

复制代码

"sel"

复制代码

).selectedIndex].value;

复制代码

一些其它操作<select>标签的技巧如下：
1)动态创建select



   1

   2

   3

   4

   5

function

复制代码

createSelect(){

复制代码

var

复制代码

mySelect = document.createElement(

复制代码

"select"

复制代码

);

复制代码

mySelect.id =

复制代码

"mySelect"

复制代码

;

复制代码

document.body.appendChild(mySelect);

复制代码

}

复制代码

2)添加选项option



   1

   2

   3

   4

   5

   6

function

复制代码

addOption(){

复制代码

//根据id查找对象，

复制代码

var

复制代码

obj=document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

//添加一个选项

复制代码

obj.add(

复制代码

new

复制代码

Option(

复制代码

"文本"

复制代码

,

复制代码

"值"

复制代码

));

复制代码

}

复制代码

3)删除所有选项option



   1

   2

   3

   4

function

复制代码

removeAll(){

复制代码

var

复制代码

obj=document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

obj.options.length=0;

复制代码

}

复制代码

4)删除一个选项option



   1

   2

   3

   4

   5

   6

function

复制代码

removeOne(){

复制代码

var

复制代码

obj=document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

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

复制代码

var

复制代码

index=obj.selectedIndex;

复制代码

obj.options.remove(index);

复制代码

}

复制代码

5)获得选项option的值



   1

   2

   3

var

复制代码

obj=document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

var

复制代码

index=obj.selectedIndex;

复制代码

//序号，取当前选中选项的序号

复制代码

var

复制代码

val = obj.options[index].value;

复制代码

6)获得选项option的文本



   1

   2

   3

var

复制代码

obj=document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

var

复制代码

index=obj.selectedIndex;

复制代码

//序号，取当前选中选项的序号

复制代码

var

复制代码

val = obj.options[index].text;

复制代码

7)修改选项option



   1

   2

   3

var

复制代码

obj=document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

var

复制代码

index=obj.selectedIndex;

复制代码

//序号，取当前选中选项的序号

复制代码

var

复制代码

val = obj.options[index]=

复制代码

new

复制代码

Option(

复制代码

"新文本"

复制代码

,

复制代码

"新值"

复制代码

);

复制代码

8)删除select



   1

   2

   3

   4

function

复制代码

removeSelect(){

复制代码

var

复制代码

mySelect = document.getElementById(

复制代码

"mySelect"

复制代码

);

复制代码

mySelect.parentNode.removeChild(mySelect);

复制代码

}

复制代码

文章来源:HTML中的<select>标签如何设置默认选中的选项

		自动登录	找回密码
密码			立即注册