Question

我有这样的表格：

<form action="php script" method="post" accept-charset="UTF-8">
    <select class="form-control" name="image" id="image" onclick='edit()' >
            <option>Image 1
            <option>Image 2
            <option>Image 3
            <option>Image 4
            <option>Image 5
            <option>Image 6
            <option>Image 7
        </select>
</form>

我有这个形象：

<img id="avatar" alt="" />

是否可以使用表单条件设置 img src ？我尝试使用一些js，比如：

<script type="text/javascript">
    var imId = document.getElementById("image").src;
    document.getElementById("avatar").src = "img/av"+imId.slice(-1)+".png";
</script>

但是它不起作用......请问有什么提示吗？

Answer 1

为什么不在选项中使用数据属性来存储图像的路径？

<select class="form-control" name="image" id="image">
    <option data-source="/first_path/">Image 1</option>
    <option data-source="/second_path/">Image 2</option>
    <option data-source="/third_path/">Image 3</option>
    <option data-source="/fourth_path/">Image 4</option>
    <option data-source="/fifth_path/">Image 5</option>
    <option data-source="/sixth_path/">Image 6</option>
    <option data-source="/seventh_path/">Image 7</option>
</select>

然后在下拉列表中使用change事件来获取所选选项的来源。

$('#image').change(function(){
    var path = $(this).find('option:selected').data('source'); //get source of selected option and store it in variable path
    $('#avatar').attr('src', path); //specify image's source to be variable path
});

Answer 2

如果您使用jQuery，请执行以下操作

$(document).ready(function() {
    var avatar = $("#avatar");
    avatar.attr("src", "img/av" + avatar.attr("src").slice(-1) + ".png";
});

Answer 3

尝试使用此代码自动将属性应用于DOM元素

$("#avatar").each(function(index) {    
    var titleName = $(this).attr("src").toString().split('/').splice(-1,1);
    var anchorIndex = "a:eq(" + index + ")";
    $(anchorIndex).attr("title", titleName);
});

Working Example

表单：选择设置img src

3 个答案: