下拉框里根据选择项不同,显示的图片也不同

function change(){
                var photo = document.getElementById("photo");
                var photoImg = document.getElementById("photoImg");
                photoImg.src = photo.value;
            }

<select name="photo" id="photo" onchange="change();">
       <option value="images/1.gif" selected="selected">头像一</option>
       <option value="images/2.gif">头像二</option>
 </select>
<img id="photoImg" src="images/1.gif">

效果图:

时间: 2024-08-04 10:08:20

下拉框里根据选择项不同,显示的图片也不同的相关文章

AngularJS: 使用ng-option生成下拉框,添加全部选择项

效果图如下: HTML代码: <div class="controls pull-left"> 消费类型: <select id="selectType" ng-model="currentType" ng-options="optiontype.id as optiontype.typeName for optiontype in typemodel"> </select> </di

iOS开发——UI篇&amp;下拉弹出列表选择项效果

下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod ‘LMDropdownView’:LMDropdownView是把想要的视图赋给它: 源代码地址:https://github.com/JxbSir/YiYuanYunGou 效果如下: 1:在主页面先定义按键跟绑定视图(没写全的都是属性中定义了比如btnRigth,dropdownView等):

关于下拉框列表不可选择相同值的设置一:当前DOM不可选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>测试-当前元素不可选</title><style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border 0.

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

关于下拉框列表不可选择相同值的设置二:重置前一项相同选择

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>测试-重置前一项相同选择</title> <style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border

下拉框&lt;select&gt;设置选中项的一个问题

基于jQuery,有两种方式设置下拉 1.$("select").val(); 2.$("option:eq(1)").attr("selected","selected"); 方法2有个问题就是只能设置一次下拉框,重复调用设置失效 <script> $(function(){ }); function sltOpt(){ $("select").val(1); } function sltOp

@Html.DropDownListFor 下拉框绑定(选择默认值)

首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); TempData["RMASalesList"] = new SelectList(userList, "Id", "UserName");//选择 userList中的Id作为 Value,选择·UserName 作为Text显示 } 然后构建前台,推荐

左右两个下拉框里的内容互换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="left_slt" size="7" multiple="multiple" style="width: 150px;&quo

同选择列表的多个下拉框怎么验证选择重复

需求场景 有多维度的过滤需求,会在多个维度上做组合,并且维度不能重复. 方法分析 这里的方法其实不是html怎么做,而是一个小算法. 我们根据维度的数量,初始化一个质数数组,分别代表每个维度的值,然后所选维度的乘积来表示当前的一个状态. 由于都是质数相乘,所以新选择维度是,若当前的乘积能够被新维度整除,那么就是重复了 html <select class="dimension" name="dimension"> <option value=&qu