설정의 img src에 - MVC 5

Question

내보기에 내가 이미지를 보여

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

나는 또한이 개 스팬, 하나는 처음에 (이미지 위) 표시되고 다른 하나는 숨겨져 있습니다 (편집 기능).

편집을 클릭하면 가시성이 전환되고 위의 img가 숨겨지고 대신 추가 이미지 값이있는 드롭 다운 목록이 표시됩니다.

저장을 클릭하면 드롭 다운 목록이 다시 숨겨지고 img가 다시 표시되며 드롭 다운 목록의 값이 img의 범위에 적용되지만 이미지 양식이 아닌 텍스트 형식으로 표시됩니다.

내 문제는 dropdownlist 값을 img span 값으로 설정하는 다음 코드에서 발생합니다.

$(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에 업데이트됩니다 무언가로^그것을 설정하는 방법을 잘 모르겠습니다.

다음은 숨겨져 있고 표시된 두 스팬을 보여주는 View 스 니펫입니다.

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

그래서 나는 JQuery와 통해 선택한 드롭 다운리스트 값을 내 IMG의 SRC 태그를 업데이트하는 방법을 찾고 있어요.

당신은 여기에 라이브 사이트를 확인하여 결과를 볼 수 있습니다 MySite 그런 다음 "편집"을 클릭 ELO 순위를 변경하고 공격하는 경우 "저장"당신이 텍스트는 장소가 아닌 이미지 소요 볼 수 있습니다. (실제로 저장하지 않으므로 잘못 편집하는 것에 대해 걱정하지 마십시오.)

Answer 1

간단히 사이트를 방문했지만 너무 깊게 파고 들지 않았습니다. 선택 상자에서 jquery change 이벤트를 원한다고 생각합니다.

편집 : 위의 HTML을 더 자세히 살펴보면 이미지에 ID 나 클래스가없는 것으로 나타났습니다. 당신은 당신이 당신은 변경 이벤트에 대한 코드를 추가 할 수 있습니다

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

페이지에이 선택 상자를 선택 변경 이벤트 예를 들어

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

에 이미지 소스 변경을 참조하기 위해이 필요합니다 다음과 같이 select 요소의 이미지 소스를 변경합니다.

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