首先从一个面试题来讲，我最近在做前端面试题，题目如下：

完成函数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"/>&nbsp;&nbsp;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详细解释的更多相关文章

  1. [Android新手区] SQLite 操作详解--SQL语法

    该文章完全摘自转自:北大青鸟[Android新手区] SQLite 操作详解--SQL语法  :http://home.bdqn.cn/thread-49363-1-1.html SQLite库可以解 ...

  2. MySQL 操作详解

    MySQL 操作详解 一.实验简介 本节实验中学习并实践 MySQL 上创建数据库.创建表.查找信息等详细的语法及参数使用方法. 二.创建并使用数据库 1. 创建并选择数据库 使用SHOW语句找出服务 ...

  3. ORM 对表操作 详解

    目录 ORM对表操作详解 表结构 ORM对表的 增 删 改 查 基于对象的跨表查询 -- 类似于子查询 基于双下划的跨表查询 -- 连表 join ORM对表的操作示例 正向查 与 反向查 relat ...

  4. spring配置文件详解--真的蛮详细

    spring配置文件详解--真的蛮详细   转自: http://book.51cto.com/art/201004/193743.htm 此处详细的为我们讲解了spring2.5的实现原理,感觉非常 ...

  5. Java 序列化Serializable详解（附详细例子）

    Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization ...

  6. python/ORM操作详解

    一.python/ORM操作详解 ===================增==================== models.UserInfo.objects.create(title='alex ...

  7. VC++常用数据类型及其操作详解

    原文地址:http://blog.csdn.net/ithomer/article/details/5019367 VC++常用数据类型及其操作详解 一.VC常用数据类型列表 二.常用数据类型转化 2 ...

  8. keepalived的配置详解（非常详细）

    keepalived的配置详解(非常详细) 2017-01-22 15:24 2997人阅读 评论(0) 收藏 举报  分类: 运维学习(25)    转载自:http://blog.csdn.net ...

  9. Git远程操作详解（转）

    转自:http://www.ruanyifeng.com/blog/2014/06/git_remote.html Git远程操作详解   Git是目前最流行的版本管理系统,学会Git几乎成了开发者的 ...

随机推荐

  1. weblogic下载

    1.网址 https://edelivery.oracle.com/osdc/faces/SoftwareDelivery 2.信息

  2. Sass-乘法

    Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同.虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题.比如下面的示例: 编译的时候报“20px*px ...

  3. ubuntu在线搭建ftp服务器

    转载:https://www.linuxidc.com/Linux/2016-12/138563.htm 在Linux中ftp服务器的全名叫 vsftpd,我们需要利用相关命令来开启安装ftp服务器, ...

  4. 不在同一个解决方案下的exe去调试dll,采用附加到进程:

    先把dll的项目生成一下,把得到的pdb,dll文件复制到exe目录下,然后直接双击运行exe(不是通过vs启动),再接着在dll的项目中”调试”->”附加到进程”,选择刚才运行的exe. 注意 ...

  5. 洛谷4721 【模板】分治 FFT

    传送门 久违的多项式全家桶= =+ 分治NTT 用的就是cdq分治的思想 对于当前递归到的区间[l,r] 我们处理出[l,mid]对[mid+1,r]答案的贡献 然后分治递归求解就可以啦qwq 这个贡 ...

  6. python基础：2.二进制

    1.二进制:计算机存储0,1的一种方式,规则是逢2进1. 一个数字在计算机存储的是一个字节,即8个bit,每个bit要么存储0,要么存储1. 0000 0000 (二进制)表示 0(十进制), 000 ...

  7. Ubuntu查找软件命令

    查找软件: apt-cache search <your search item>

  8. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

  9. php explode()函数 语法

    php explode()函数 语法 作用:把字符串打散为数组 语法:explode(separator,string,limit)大理石机械构件 参数: 参数 描述 separator 必需.规定在 ...

  10. 使用vue-i18n实现项目的国际化 以及iview的国际化

    一:项目的国际化 vue-i18n官网 1. 在src中新建一个language文件夹(包含index.js.US.js.CN.js) (1)US.js 保存变量的英文,内容: export defa ...