首页新闻找找看学习计划

如何局部更新页面图片

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>的图片是我要根据前一个标签的选择展示对应的图片。有没有什么简便的方法不刷新页面更新图片。求大神给个具体方案。。本人刚入行,比较菜。

js jq
hyq1230的主页 hyq1230 | 初学一级 | 园豆:92
提问于:2017-07-25 09:42
< >
分享
最佳答案
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
好来污影后 | 菜鸟二级 |园豆:287 | 2017-07-25 10:10

我的图片为地址链接。testImage.src = v + '.png';这个写法没见过,没搞懂。

<option value="1">第1张图</option>里面的value值填图片名称么?

hyq1230 | 园豆:92 (初学一级) | 2017-07-25 10:25

@hyq1230: 道理是一样的,option里面的value放入图片链接,你可以通过遍历来创建option,然后在onchange中修改图片的src。没看懂的话,你可以把我的代码复制粘贴到本地试试

好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-25 10:28
其他回答(1)
0

如果会jquery,就用jquery去后台请求。当数据列表发生变化时候,触发事件。事件中传递select的数据,传递并返回图片地址。

lippor | 园豆:59 (初学一级) | 2017-07-25 10:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册