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 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
浅析Ajax语法
Dec 05 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
vue全局使用axios的操作
Sep 08 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
Ajax实现异步加载数据
Nov 17 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
那些年一起学习的PHP(一)
2012/03/21 PHP
php中使用websocket详解
2016/09/23 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
Python网络编程 Python套接字编程
2017/09/13 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python测试线程应用程序过程解析
2019/12/31 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
高三自我评价
2014/02/01 职场文书
赔偿协议书范本
2014/04/15 职场文书
工厂标语大全
2014/10/06 职场文书
市场部经理岗位职责
2015/02/02 职场文书
学生会招新宣传语
2015/07/13 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
浅析Python OpenCV三种滤镜效果
2022/04/11 Python