html中关于标签如何设置默认选中的选项详解

方法有两种。

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

< select  id =  "sel" >
< option  value = "1" >1
< option  value = "2"  selected = "selected" >2
< option  value = "3" >3

第二种为通过前端js来控制选中的项:

< script  type = "text/javascript" >
function change(){
     document.getElementById("sel")[2].selected=true;
}

< select  id =  "sel" >
< option  value = "1" >1
< option  value = "2" >2
< option  value = "3" >3

< input  type = "button"  value = "修改"  onclick = "change()"  />

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

var  val = document.all.Item.options[document.all.Item.selectedIndex].text
var  i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

一些其它操作标签的技巧如下：

立即学习“前端免费学习笔记（深入）”；

1)动态创建select

function  createSelect(){
var  mySelect = document.createElement( "select" );
mySelect.id =  "mySelect" ;
document.body.appendChild(mySelect);
}

2)添加选项option

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

下载

function  addOption(){
//根据id查找对象，
var  obj=document.getElementById( 'mySelect' );
//添加一个选项
obj.add( new  Option( "文本" , "值" ));
}

3)删除所有选项option

function  removeAll(){
var  obj=document.getElementById( 'mySelect' );
obj.options.length=0;
}

4)删除一个选项option

function  removeOne(){
var  obj=document.getElementById( 'mySelect' );
//index,要删除选项的序号，这里取当前选中选项的序号
var  index=obj.selectedIndex;
obj.options.remove(index);
}

5)获得选项option的值

var  obj=document.getElementById( 'mySelect' );
var  index=obj.selectedIndex;  //序号，取当前选中选项的序号
var  val = obj.options[index].value;

6)获得选项option的文本

var  obj=document.getElementById( 'mySelect' );
var  index=obj.selectedIndex;  //序号，取当前选中选项的序号
var  val = obj.options[index].text;

7)修改选项option

var  obj=document.getElementById( 'mySelect' );
var  index=obj.selectedIndex;  //序号，取当前选中选项的序号
var  val = obj.options[index]= new  Option( "新文本" , "新值" );

8)删除select

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