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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
javascript实现计算器功能
Mar 30 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
javascript下function声明一些小结
2007/12/28 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
js重写方法的简单实现
2016/07/10 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
JAVA和C++区别都有哪些
2015/03/30 面试题
雅虎笔试题(字符串操作)
2015/03/24 面试题
实习单位接收函模板
2014/01/10 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript