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 自定义事件初探
Aug 21 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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中Smarty模板初体验
2011/08/08 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
javascript简易画板开发
2020/04/12 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Python实现处理管道的方法
2015/06/04 Python
python实现下载文件的三种方法
2017/02/09 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python爬虫请求头设置代码
2020/07/28 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
大学体育课感想
2015/08/10 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
golang 语言中错误处理机制
2021/08/30 Golang
青岛市的收音机研制与生产
2022/04/07 无线电