js下拉列表联动,上传图片展示的问题 - ITeye问答

问答首页 → Web前端技术

0 0

js下拉列表联动,上传图片展示的问题10

如何实现下拉列表中选择一个建筑物,然后下面的图片展示会根据选中的建筑物改变

在建筑物模块图片展示的时候如何将上传的图片展示出来,我这里是写死的.

我用的是bootstrap3.0,希望各位老师教教我如何实现的,尽量详细,谢!

JavaScript HTML5

2014年1月20日 17:29

mingnianshimanian
1
0 0 6

查看图片附件

2个答案按时间排序按投票排序

0 0

采纳的答案

js的

<select onchange="jsFunction(this)">
  <option value="" selected >Label</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<img id='imgId' src='1.gif'/>

function jsFunction(sel){
 document.getElementById('imgId').src=this.options[this.selectedIndex].value+".gif";
}

jquery的：

<select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
 </select>
<img id='imgId' src='1.gif'/>
$( ".target" ).change(function() {
  $("#imgId").attr("src", $(this).val()+'.gif');
});

2014年1月21日 10:11

sprite311
326
1 1 42

1条评论

0 0

onchange（index）{
img.sec=index
}

2014年1月20日 17:40

bjmice1985
0
0 0 2

2条评论

相关推荐

三级联动+JS地址库: 在这个项目中，HTML会包含用于展示和接收用户选择的元素，如下拉列表或选择器。在"基于Boostrap的三级联动+JS地址库"的压缩包中，我们可以期待找到以下内容： 1. HTML文件：包含Bootstrap样式的HTML结构，用于展示...

js 导航日历控件省市区三级联动: 这是一种典型的动态下拉列表，利用JavaScript根据用户的选择动态请求和填充数据，提升用户体验。总的来说，这些知识点体现了JavaScript在网页交互设计中的广泛应用，涵盖了导航、数据展示、用户输入处理等多个方面...

三级联动地区选择下拉插件: “area.js”很可能是实现三级联动逻辑的JavaScript文件，包含了处理用户交互和数据更新的函数。“charfirstPinyin.js”可能用于将地区名转换为首字母拼音，便于按字母排序。“php中文网免费下载站.txt”可能是关于...

基于Javascript实现二级联动菜单效果: 第二个效果部分展示的是利用JavaScript实现鼠标经过图片放大、鼠标移出图片恢复原状的效果。在`init()`函数中，获取id为`img0`的图片元素，并为其绑定`onmouseover`和`onmouseout`事件处理函数。当鼠标悬停在图片上...

省市联动和条件的选择: 首先，"省市联动"是指在选择一个省份后，下拉菜单自动更新展示与该省份相关的城市，提供用户更精确的选择。这种联动效果通常通过JavaScript实现，利用AJAX（异步JavaScript和XML）技术来动态加载和更新数据。在前端...

web页面三级联动菜单: 三级联动菜单通常指的是一个包含主菜单、子菜单和孙菜单的多层次下拉菜单结构，用户在选择一级菜单时，会触发二级子菜单的显示，继续选择二级菜单则会展示三级子菜单。这种设计模式极大地节省了页面空间，同时也提升...

实现帝国省市联动菜单: - **JavaScript**：gzwl.js文件是实现联动效果的关键，其中包含的JavaScript代码用于监听省级选择器的变化事件，当用户选择一个省份时，通过Ajax异步请求向服务器获取对应省的市列表，并更新城市选择器的选项。...

JS表单二级联动: 3. **表单元素**: 构成表单的基本单位，包括文本框、下拉列表、按钮等。 4. **事件**: 用户与网页交互时触发的动作，例如点击、鼠标移动等。 #### 三、核心知识点解析 ##### 3.1 列表框二级联动 **列表框二级联动*...

jQuery移动端城市区县二级联动选择代码: 首先，`index.html`文件是整个应用的入口，它包含了HTML结构，用于展示城市和区县的下拉列表。这些下拉列表通常会有一个默认的城市选项，并且当用户选择一个城市后，对应的区县列表会被动态加载。HTML中可能包含`...

城市-公司-部门三级联动的Ajax实现: 在Web开发中，数据层级关系的联动展示是一个常见的需求，比如在用户选择地理位置时，从城市到公司再到部门，每一步的选择都会根据前一步的结果动态加载下一级别的选项。在这个场景中，"城市-公司-部门三级联动的Ajax...

jQuery省市二级联动关联店面查询表单代码: 这是一种常见的前端交互设计，用户在选择省份后，下拉菜单会自动更新为与所选省份相关的城市列表。这种联动效果是通过jQuery监听事件并动态更新DOM（文档对象模型）来实现的。在`index.html`中，可以看到HTML结构...

jQuery商品发布三级联动菜单代码.zip: 总的来说，这个压缩包提供的代码示例展示了如何使用jQuery实现商品发布的三级联动菜单。开发者可以根据实际需求调整HTML结构，修改CSS样式，以及优化JavaScript逻辑。这是一个很好的学习和实践jQuery交互效果的例子...

仿百度文库_多级联动分类选择器: - 使用JavaScript将数据绑定到DOM元素上，创建可交互的下拉菜单或列表。 - 添加事件监听器，当用户在任一级别作出选择时，触发相应处理函数。 - 处理函数根据当前选择，过滤并展示下一级别的分类选项。 - 更新UI，...

javascript实现无限级select联动菜单: 这是一个常见的网页界面元素，用户在选择一个下拉列表中的选项后，另一个下拉列表会根据选择的内容刷新，显示相关联的选项。例如，在填写地址信息时，选择了一个国家后，接下来的省、市、区等选项会相应改变。 ...

微信小程序：导航定位录音瀑布流三级地址联动minapp-master.zip: 瀑布流布局是一种常用于图片展示的布局方式，适合展示大量不规则尺寸的内容。微信小程序可以通过CSS样式和数据驱动动态渲染实现瀑布流效果。可以利用`wx.createSelectorQuery`选择器查询组件，获取每个元素的高度，...

jquery js效果: 在IT行业中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。...无论是图片展示、选择框联动还是下拉列表的动态加载，掌握这些技术都将对你的前端开发能力大有裨益。

省市区镇四级联动插件citypicker.js: 在本案例中，我们讨论的是一个名为"citypicker.js"的jQuery插件，它实现了省市区镇四级联动的效果。这个插件使得用户在选择省份时，下方会自动显示出对应的市、区/县以及镇的下拉选项，提供了流畅且便捷的用户体验。...

jquery制作京东物流配送三级关联城市选择: 然后，使用jQuery的事件绑定函数，如`$(selector).change()`监听下拉列表的改变事件。当事件触发时，更新相应的下拉列表选项，通过`append`或`html`方法添加新的选项。此外，`index.html`中的HTML结构应包含多个`...

实现省市无刷新二级联动: 7. ajax_func.js：这是一个JavaScript文件，其中包含了实现无刷新联动的核心功能。它可能会监听DOM元素的事件（如change或click），发送Ajax请求到Handler，并处理返回的数据，将结果动态插入到城市选择框中。实现...

Bootstrap响应式省市地区联动代码.zip: 3. JavaScript文件：可能包括Bootstrap的JS库、jQuery以及实现联动功能的自定义脚本。JavaScript代码将处理用户的交互，如点击事件，以及从服务器获取和更新地区数据。 4. JSON或其他数据文件：可能存储省市地区的...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics