테이블 셀에 값을 함께 추가 할 수있는 JScript. 추가 할 값은 드롭 다운 목록에서 어떤 옵션을 선택 하느냐에 따라 다릅니다.

Question

기본적으로 필자는 내 뷰 (MVC 2)에서 PC를 만들기위한 목록을 드롭 다운했습니다.

이

<%: Html.DropDownList("CPUList", new SelectList((IEnumerable)Model.processor, "ProductID","Name")) %> 

<%: Html.DropDownList("MBList", new SelectList((IEnumerable)Model.motherboard, "ProductID","Name")) %> 

나는에 대한 가격을하고자하는 Ajax 요청 매번로 복귀하고 싶지 않은 : 모든 당신이 아닌 MVC 사람들을 위해, 아래의 인라인 뷰 코드는 표준 드롭 다운 목록 (들)을 얻을 것입니다 제품 ID가 값이고 부품 이름이 가격이 아니기 때문에 드롭 다운 목록의 옵션. 나는 아래처럼 뭔가에 대해 생각하고 있었으므로 모든 productID와 해당 가격을 숨겨진 테이블의 테이블 행에 가질 수 있습니다. 그래서 행의 한 셀에있는 ProductID와 셀 옆에있는 가격. 이제 드롭 다운 목록에서 선택한 옵션의 값 (ProductID)을 사용하여 테이블의 ProductID를 키로 사용하여 숨겨진 테이블의 가격을 찾고 해당 셀의 다음 셀에서 가격을 가져 오는 JavaScript가 필요합니다. 같은 행. 드롭 다운 목록에서 선택한 모든 옵션에 대해이를 수행하고이를 추가하고 합계를 표시하십시오. 이 작업을 수행 할 수 있습니까? HTML 테이블에 Jscript에 연결할 수있는 인덱스가 있습니까?

<table border="1" id="ProcessorPrices" style="visibility: none;"> 
<% foreach (var itm in Model.processor) 
{ %> 

<tr> 
<td id="cpuprice"><%: itm.ListPrice %></td> 
<td id="cpupid"><%: itm.ProductID %></td> 

</tr> 

<% } %> 


</table> 

감사합니다 ..

Answer 1

JQuery와는 nth-child selector을 사용하여 테이블의 행의 인덱스로 연결할 수 있지만, 아마도 당신의 디자인에 팅겨는 가격을 찾는 만들 것입니다 쉽게 :

<table border="1" id="ProcessorPrices" style="visibility: none;"> 
<% foreach (var itm in Model.processor) 
{ %> 

<tr> 
<td id="cpupid_<%: itm.ProductID %>"><%: itm.ListPrice %></td>  
</tr> 

<% } %> 


</table> 

그런 다음 같은 것을 사용하여 가격을 찾아 볼 수있다 :

var allSelects = $("select"); 
allSelects.change(function() { 
    var total = 0; 
    allSelects.filter("[selectedIndex!='0']").each(function() { 
    total += parseFloat($("#cpupid_" + $(this).val()).text()); 
    }); 
    $("#resultBox").html(total); 
});