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中null与undefined分析
Jul 25 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
javascript常用对话框小集
2013/09/13 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js同源策略详解
2015/05/21 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
django反向解析URL和URL命名空间的方法
2018/06/05 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python使用thrift教程的方法示例
2019/03/21 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python执行时间的几种计算方法
2020/07/31 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
医生进修自我鉴定
2014/01/19 职场文书
实用的简历自我评价
2014/03/06 职场文书
小学生通知书评语
2014/12/31 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
javascript之Object.assign()的痛点分析
2022/03/03 Javascript