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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
原生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
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
Vue header组件开发详解
2018/01/26 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
学校后勤人员职责
2013/12/27 职场文书
机械专业求职信范文
2014/07/15 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
党校党性分析材料
2014/12/19 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python