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 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
node读写Excel操作实例分析
Nov 06 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
Python Property属性的2种用法
2015/06/21 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python+os根据文件名自动生成文本
2019/03/21 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
运动会广播稿300字
2014/01/10 职场文书
结婚典礼证婚词
2014/01/11 职场文书
学生会竞聘书范文
2014/03/31 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
公司开业主持词
2015/07/02 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers