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中$(function() {});写与不写有哪些区别
Aug 10 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
Javascript之String对象详解
Jun 08 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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
UCenter 批量添加用户的php代码
2012/07/17 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python实现进程间通信简单实例
2014/07/23 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python如何判断IP地址合法性
2020/04/05 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
小班重阳节活动方案
2014/02/08 职场文书
贺卡寄语大全
2014/04/11 职场文书
任命书范本大全
2014/06/06 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
护士实习自荐信
2015/03/06 职场文书
恰同学少年观后感
2015/06/08 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
Nginx配置https的实现
2021/11/27 Servers
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
Java Redisson多策略注解限流
2022/09/23 Java/Android