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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
js 内存释放问题
Apr 25 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
vue+openlayers绘制省市边界线
Dec 24 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
php 用sock技术发送邮件的函数
2007/07/21 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
动态控制Table的js代码
2007/03/07 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python tkinter实现屏保程序
2019/07/30 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
旷课检讨书500字
2014/10/14 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
思想工作总结范文
2015/08/12 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python