Javascript 在视图中使用JQuery设置imgsrc-mvc5

在我看来，我展示了一幅图像

我还有两个跨度，一个最初显示（上图），另一个隐藏（编辑功能）

单击“编辑”时，跨度切换可见性，上面的img隐藏，并显示一个下拉列表，其中包含其他图像值

当我单击Save时，dropdownlist被重新隐藏，img被重新显示，然后dropdownlist的值被应用到img的跨度中，但它是文本形式而不是图像形式

我的问题是以下代码将dropdownlist值设置为img跨度值

$(element).closest("td").prev("td").find("span.item-display")
.html($(element).closest("td").prev("td").find("span.item-field").find("option:selected").text().trim());

我总是用它来更新文本输入值，而不是图像源值，因此我不知道如何将它转换为将更新img src的内容

下面是显示隐藏和显示的两个跨距的视图片段

<td class="col-xs-2" style="vertical-align:middle">
     <span class="item-display">
           <span style="font-size: 17px">
                <img src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">
            </span>
      </span>
      <span class="item-field">
            @Html.DropDownList("elo", null, "Choose...", new { @id = "userElo", @class = "col-xs-10", @Style = "padding-left:0px" })         
      </span>
</td>

@Html.DropDownList（“elo”，null，“Choose…”），new{@id=“userElo”，@class=“col-xs-10”，@Style=“padding left:0px”}）

因此，我正在寻找一种方法，通过JQuery使用所选的dropdownlist值更新我的imgsrc标记

您可以通过查看此处的实时站点查看结果：

---

如果您单击“编辑”，然后更改ELO排名并单击“保存”，您将看到文本取代它，而不是图像。（也没有实际的保存发生，所以不要担心编辑错误）

短暂访问了您的站点，但没有深入挖掘。我认为您希望在选择框上显示jquery更改事件

编辑：仔细查看上面的HTML，注意到图像上没有任何ID或类。在“选择更改”事件中，您需要它来引用图像源更改

<img id="GiveMeAnID" src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">

---

啊，所以只需给出一个ID并更改src属性！我马上就要试一试了！

<select style="padding-left:0px" class="col-xs-10" id="userElo" name="elo"><option value="">Choose...</option>
<option value="1">Unranked       </option>
<option value="2">Bronze         </option>
<option value="3">Silver         </option>
<option value="4">Gold           </option>
<option value="5">Platinum       </option>
<option value="6">Diamond        </option>
<option value="7">Challenger     </option>
</select>

$( "#userElo" ).change(function() {
    $("#yourimageID").attr("src","/yourpath/yourimage.jpg");
});