如何局部更新页面图片
0
悬赏园豆：10
[已解决问题]
解决于 2017-07-25 10:44
<div>
<select name="floor_id" id="floor_id" class="sec" >
<option value="" >请选择楼层名称</option>
<c:if test="${not empty flist}">
<c:forEach items="${flist}" var="info" varStatus="vs">
<option value="${info.floor_id}" <c:if test="${info.floor_id == floor.floor_id}">selected="selected"</c:if>>${info.floor_name}</option>
</c:forEach>
</c:if>
</select>
</div>
<div class="content">
<img src="${floor.image}" style="width:100%" alt="">
</div>
----------------------------
第一个<div>标签内是从数据库获取的数据列表，第二个<div>的图片是我要根据前一个标签的选择展示对应的图片。有没有什么简便的方法不刷新页面更新图片。求大神给个具体方案。。本人刚入行，比较菜。
最佳答案
1
利用JS比较简单的做法是：图片根据option的value作为名称，select上面加上onChange事件，只要onChange触发就使用当前select的value来改变img标签中的src
<select onchange="test(this.value)"> <option value="1">第1张图</option> <option value="2">第2张图</option> <option value="3">第3张图</option> <option value="4">第4张图</option> </select> <img id="testImage" src="" alt="我是图片">
以上是HTML
<script>
var test = function(v) {
testImage.src = v + '.png';
}
</script>
以上为JS
收获园豆：10
我的图片为地址链接。testImage.src = v + '.png';这个写法没见过，没搞懂。
<option value="1">第1张图</option>里面的value值填图片名称么？
@hyq1230: 道理是一样的，option里面的value放入图片链接,你可以通过遍历来创建option，然后在onchange中修改图片的src。没看懂的话，你可以把我的代码复制粘贴到本地试试
其他回答(1)
0
如果会jquery，就用jquery去后台请求。当数据列表发生变化时候，触发事件。事件中传递select的数据，传递并返回图片地址。
