select标签设置默认选中的选项方法


Posted in Javascript onMarch 02, 2018

方法有两种。

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

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

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

< 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代码为:

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

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

2)添加选项option

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);
}

以上这篇select标签设置默认选中的选项方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
微信小程序实现图片上传
May 23 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
原生JavaScript实现todolist功能
Mar 02 #Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
vue判断input输入内容全是空格的方法
Mar 02 #Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 #Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 #Javascript
Vue2.0系列之过滤器的使用
Mar 01 #Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 #Javascript
You might like
星际争霸任务指南——神族
2020/03/04 星际争霸
php获取从html表单传递数组的方法
2015/03/20 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
修改发贴的编辑功能
2007/03/07 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python函数返回值实例分析
2015/06/08 Python
Python进行数据提取的方法总结
2016/08/22 Python
python导入时小括号大作用
2017/01/10 Python
Django自定义分页效果
2017/06/27 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Java面向对象面试题
2016/12/26 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
20年同学聚会感言
2014/02/03 职场文书
《我的信念》教学反思
2014/02/15 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
秋收起义观后感
2015/06/11 职场文书