如何根据选定的选项更改图片？

Question

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

<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>

我在下面显示它会是什么样的：

显示用户选择他的姓名和照片：

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

知道怎么做吗？

Answer 1

一般的想法是：

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

你需要添加＆＃34; id＆＃34;属于你的＆＃34;图像＆＃34;标签，以便您可以轻松找到它。然后确保＆＃34;选择＆＃34;的值。元素指向图像（名称和值是不同的东西 - 用户看到名称，脚本获取值），它应该是这样的：

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