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静态的url如何传递
May 03 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
jquery键盘事件介绍
Jan 31 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
AngularJS指令用法详解
Nov 02 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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之数组学习
2011/05/29 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
js版本A*寻路算法
2006/12/22 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
团队队名口号大全
2014/06/06 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
欢迎新生标语2015
2015/07/16 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js