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>
最新文章
- hash简单介绍
- [troubleshoot][archlinux][X] plasma(KDE) 窗口滚动刷新冻结(约延迟10s)(已解决,root cause不明,无法再次复现)
- 测试-Unity修改权重
- 对石家庄铁道大学网站的UI分析
- Powerdesigner中如何生成测试数据
- onethink
- SqlDataAdapter.Update批量数据更新
- junit参数化测试的使用方法
- 获取合并单元格中值的一个方法POI
- App如何选择移动广告平台的开发者3 - 选择标准广告平台
- POJ 1873 The Fortified Forest
- 在linux下利用信号量实现一个写者线程多个读者线程
- 控制结构(4) 局部化(localization)
- 解读Raft(二 选举和日志复制)
- 关于微信小程序切换获取不到元素的问题
- alfred3配置
- 一个简单好用的日志框架NLog
- Linux 配置SFTP,配置用户访问权限
- SDN2017 第三次实验作业
- 将docker的image转移到数据盘