记录（2019年2月8日）解决的点击下拉框的不同option来改变一个img的src属性值问题

在做CMS后台的时候要实现一个功能，用户在下拉选择不同商品的时候，在下拉框旁附上一个商品图片，当用户选择不同的商品的时候，图片中显示后台传入option的url（自定义属性），并通过option的from（自定义属性【1：本地图片url，2：网络图片url】）来判断，最后拼接好字符串，利用JQuery的$('#img的id').attr('src', 新url);来改变图片src地址。

由此可见选择不同的下拉则会改变旁边图片内容。

下面贴代码：

    <select name="product_id" onchange="setAct(this)" id="product">
        <option value="">请选择商品</option>
        {volist name="all_productNames" id="vo"}
        <option value="{$vo.id}" url="{$vo.main_img_url}" from="{$vo.from}">
             {$vo.name}                    
        </option>
        {/volist}
    </select>
    <img id="product_img" src="" height="50px" />

这里说明：因为用了TP5的模板语法所以会利用volist循环数据，讲select选择框的id设置为product，同时加入一个方法setAct(this)，考虑到option要和后端做数据交互，所以一个value属性是不够的，我们再增加一个url和from属性，一会儿会在js中用到这两个属性（js引用了JQuery框架，因为要用JQuery更加简洁），这里option的url属性只有图片名字如图：

记录（2019年2月8日）解决的点击下拉框的不同option来改变一个img的src属性值问题

所以还需要拼接字符串，但是有一个问题，数据库中的main_img_url会根据from来存不同的地址信息，当from=1（本地）会拼接字符串，当from=2（网络）不需要拼接字符串，因为直接存的是网络上的图片url。

JS代码：

    <script type="text/javascript">
        function setAct(id){
                var url = $('#product').find("option:selected").attr("url"); 
                var from = $('#product').find("option:selected").attr("from"); 
                if (from == 1) {
                    $('#product_img').attr('src', '__IMG__' + url);
                }
                if (from == 2) {
                    $('#product_img').attr('src', url);
                }
        }
    </script>

说明：

当点击选择框触发改变事件，找到option的url属性的值就是=数据库中的main_img_url的值。

找到option的from属性的值就是=数据库中的from的值。

通过判断from的值来选择是否拼接完整的图片src路径。

这里的__IMG__是TP5框架的模板语法，可以看作是一个常量，后端已经定义好了，相当于是一个路径。

然后使用JQ调用修改图片src的方法完成src的改变。

记录（2019年2月8日）解决的点击下拉框的不同option来改变一个img的src属性值问题

相关推荐