如何将图片更改为选定的选项？答案

【问题标题】：How to change picture based into a selected option?如何将图片更改为选定的选项？
【发布时间】：2014-07-31 20:32:51
【问题描述】：

我想在用户更改选择选项时更改用户图片。

<form name="main" method="post">
    <div class="lock-box text-center">
        <div class="lock-name">$:mainform.render()</div>
        <img src="static/ux/images/lock_thumb.jpg" alt="lock avatar"/>
        <div class="lock-pwd">
            <div class="form-group">
                <input type="password" placeholder="Password" id="exampleInputPassword2" class="form-control lock-input" />
                <button class="btn btn-lock" type="submit">
                  <i class="fa fa-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
</form>

这是我的$:mainform.render() 生成的：

<select id="mpfUser" name="">
  <option value="John">John</option>
  <option value="Mary">Mary</option>
</select>

我在下面展示它会是什么样子：

用户选择他的名字并显示他的照片：

另一个用户选择他的名字和图片也改变了它：

知道怎么做吗？

【问题讨论】：

标签： html image web

【解决方案1】：

总体思路是：

$('#mpfUser').on('change', function() {
    var SelectedImage = $('#mpfUser').val();
    $('#image_id').attr("src", SelectedImage );
});

您需要将“id”属性添加到“图像”标签中，以便您轻松找到它。然后确保“select”元素的值指向图像（名称和值是不同的东西 - 用户看到名称，脚本获取值），它应该是这样的：

<select id="mpfUser" name="">
  <option value="path/to/images/John.jpg">John</option>
  <option value="path/to/images/Mary.jpg">Mary</option>
</select>

【讨论】：