selectDOM操作详解-select option详细解释
首先从一个面试题来讲,我最近在做前端面试题,题目如下:
完成函数showlmg(),要求能够动态根据下拉列表的选项变化,更新图片的显示
<body>
<script type="text/javascript">
function showImg (oSel) {
};
</script>
<img id="pic" src="img1.jpg" width="200" height="200">
<br/>
<select id="sel" onchange="showImg(this)">
<option value="img1">城市生活</option>
<option value="img2">都市早报</option>
<option value="img3">青山绿水</option>
</select>
</body>
我就顺便找了下有关select的DOM操作方法,发现有的是错的,所以还是得自己动手操作啊
首先基础:
//增加一个新的option:
</script>
<select id="add" style="width:100px;height:30px;font-size: 24px;">
<option value="qi">qi</option>
<option value="test1" selected="true">test</option>
</select>
addValue:<input type="text" id="addValue"/> addText:<input type="text" id="addText"/>
<button id="addOption">addOption</button>
<button id="delOption">delOption</button>
<script>
var add=document.querySelector('#add');
var addOption=document.querySelector('#addOption');
var delOption=document.querySelector('#delOption');
var addValue=document.querySelector('#addValue');
var addText=document.querySelector('#addText');
//获取select#add下的所有option
var allOptions=add.getElementsByTagName('option');
console.log(add.value);//当前选中的option的value值
console.log(add.selectedIndex);//当前选中的option的index索引
console.log(add.options[add.selectedIndex].innerHTML);
console.log(add.options[add.selectedIndex].text);//当前选中的option的text值
addOption.onclick=function(){
//创建一个新的option并赋值
var flag=true;
//这里对addText还可以进行更详细的内容控制,可以用正则进行处理
if(addText.value==''){
addText.setAttribute("placeholder","addText不能为空");
}else{
//将新创建的option添加进select列表
for(var i=0;i<allOptions.length;i++){
if(allOptions[i].text==addText.value){
flag=false;
break;
}else{
flag=true;
}
}
if(flag==true){
var newOption=new Option(addText.value,addValue.value);
add.options.add(newOption);
console.log('添加成功');
}else{
console.log("addText不能重复");
}
}
}
delOption.onclick=function(){
for(var i=0;i<allOptions.length;i++){
if(allOptions[i].selected==true){//如果当前元素被选中
add.options.remove(allOptions[i]);
}
}
}
</script>
//下面回到最初的面试题,相信你也可以想到不同的几个思路吧,那么我尝试几个思路吧
<img id="pic" src="img1.jpg" width="200" height="200" alt="img1.jpg"/>
<br/>
<select id="sel" onchange="showImg(this);">
<option value="img1">城市生活</option>
<option value="img2">都市早报</option>
<option value="img3">青山绿水</option>
</select>
<script>
var pic=document.querySelector('#pic');
var sel=document.querySelector('#sel');
function showImg (oSel) {
pic.src=oSel.options[oSel.selectedIndex].value+'.jpg';
pic.alt=oSel.options[oSel.selectedIndex].value+'.jpg';
};
</script>
selectDOM操作详解-select option详细解释的更多相关文章
- [Android新手区] SQLite 操作详解--SQL语法
该文章完全摘自转自:北大青鸟[Android新手区] SQLite 操作详解--SQL语法 :http://home.bdqn.cn/thread-49363-1-1.html SQLite库可以解 ...
- MySQL 操作详解
MySQL 操作详解 一.实验简介 本节实验中学习并实践 MySQL 上创建数据库.创建表.查找信息等详细的语法及参数使用方法. 二.创建并使用数据库 1. 创建并选择数据库 使用SHOW语句找出服务 ...
- ORM 对表操作 详解
目录 ORM对表操作详解 表结构 ORM对表的 增 删 改 查 基于对象的跨表查询 -- 类似于子查询 基于双下划的跨表查询 -- 连表 join ORM对表的操作示例 正向查 与 反向查 relat ...
- spring配置文件详解--真的蛮详细
spring配置文件详解--真的蛮详细 转自: http://book.51cto.com/art/201004/193743.htm 此处详细的为我们讲解了spring2.5的实现原理,感觉非常 ...
- Java 序列化Serializable详解(附详细例子)
Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization ...
- python/ORM操作详解
一.python/ORM操作详解 ===================增==================== models.UserInfo.objects.create(title='alex ...
- VC++常用数据类型及其操作详解
原文地址:http://blog.csdn.net/ithomer/article/details/5019367 VC++常用数据类型及其操作详解 一.VC常用数据类型列表 二.常用数据类型转化 2 ...
- keepalived的配置详解(非常详细)
keepalived的配置详解(非常详细) 2017-01-22 15:24 2997人阅读 评论(0) 收藏 举报 分类: 运维学习(25) 转载自:http://blog.csdn.net ...
- Git远程操作详解(转)
转自:http://www.ruanyifeng.com/blog/2014/06/git_remote.html Git远程操作详解 Git是目前最流行的版本管理系统,学会Git几乎成了开发者的 ...
随机推荐
- python写txt文件
with open('data.txt','w') as f: #设置文件对象 w是重新写,原来的会被抹掉,a+是在原来的基础上写 str0=u"写文件\n" #写中文要在字符串签 ...
- 浅谈SAP CRM和Hybris Commerce里的价格架构折扣
最近Jerry做了一个和价格折扣相关的原型项目,把学到的知识记录下来,以备将来查阅. 在这个原型项目里,我们用React-Native开发了一个移动应用,用户可以在手机上浏览SAP Hybris Co ...
- 前端-PC端瀑布流【10张图】
.HTML 利用封装的 jquerywaterfall.js 方法 完成 <!DOCTYPE html> <html lang="en"> <head ...
- Request Payload 和 Form Data 的区别
概述 我正在开发的项目前端和后端是完全独立的,通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务.昨天发现,我前端执行 post 请求,后台 springmvc 的 @Reques ...
- 初识java-1.Java跨平台的原理
计算机只认识二进制的机器指令,而且不同的平台的计算机的机器指令不同.Java中将程序员编写的源码文件编译成字节码文件,在不同的计算机平台上安装不同的虚拟机,虚拟机将同一份字节码文件解释为不同的机器指令 ...
- JS中数据结构之字典
字典是一种以键 - 值对形式存储数据的数据结构 通过数组实现字典 function Dictionary() { this.add = add; this.datastore = new Array( ...
- 关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题
axios现在以及是尤大大推荐使用的了,官方不在维护vue-reresource. 由于是地第一次使用axios, 在使用过程中猜了很大的坑 首先我们使用vue-cli创建的项目, 访问接口肯定是跨域 ...
- Apache搭建http网站服务器入门教程
Apache搭建http网站服务器入门教程 准备工具 一台带有Linux系统的主机,这里使用CentOS 7.1 64位系统 一个备案过的域名,这里使用www.hellopage.cn 一台可以访问网 ...
- c#蜘蛛
C#写一个采集器 using System; using System.Collections.Generic; using System.Text; using System.Net; using ...
- 如何为网站启用HTTPS加密传输协议
前言 当今时代对上网的安全性要求比以前更高,chrome和firefox也都大力支持网站使用HTTPS,苹果也从2017年开始在iOS 10系统中强制app使用HTTPS来传输数据,微信小程序也是要求 ...