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学习笔记(三)显示当时时间的代码
Apr 08 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
对vuex中getters计算过滤操作详解
Nov 06 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
python实现ping的方法
2015/07/06 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python解惑之整数比较详解
2017/04/24 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
如何使用repr调试python程序
2020/02/28 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python如何实现单例模式
2016/06/03 面试题
信息专业大学生自我评价分享
2014/01/17 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
开展警示教育活动总结
2015/05/09 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android