我有带有列的html表,其中每个列都包含按钮和下拉列表。
<table class="table" border="1">
<thead>
<tr>
<td>
<p>
Terminy
</p>
<br/>
<p>
Warsztat
</p>
<p>
Liczba uczestników
</p>
</td>
@foreach(DateTime date in Model.AssignedAttractions.Keys.ToList())
{
<td>
<p>
@date.ToShortDateString()
</p>
<p>
@(ReservationAttractions.Days[date.DayOfWeek.ToString()])
</p>
<p>
@Html.DropDownList("AttractionsAvaiableAttractions", Model.AvaiableAttractions)
</p>
<p>
@Html.DropDownList("AttractionsQuantityParticipants", Model.ParticipantsQuantity)
</p>
<p>
<input type="button" value="Wybierz" />
</p>
</td>
}
</tr>
</thead>
</table>
列数可以不同。如何使用javascript单击哪个按钮,并从单击按钮所在列的下拉列表中获取所选项目?
使用模型填充表格。
public class ReservationAttractions
{
public List<SelectListItem> AvaiableAttractions { get; set; }
public List<SelectListItem> ParticipantsQuantity { get; set; }
public Dictionary<DateTime,List<string>> AssignedAttractions { get; set; }
}
最佳答案
您可以为按钮添加点击处理程序。然后获得在下拉菜单中选择的值,如下所示:
$(document).ready(function () {
$("thead td input[type='button']").click(function () {
// gets the td for which button was clicked
var $td = $(this).closest("td");
// gets the selected Attraction for that particular td
var selectedAttractions = $td.find("[name^='AttractionsAvaiable']").val();
// gets the selected Participants for that td
var selectedParticipants = $td.find("[name^='AttractionsQuantity']").val();
});
});
MVC将
name
属性添加到表单元素。并且当存在循环时,它会附加一些额外的内容来区分元素。 [name^='AttractionsAvaiableAttractions']
是Attribute Starts With Selector
。这将返回select
元素。由此,您可以获取.val()
以获得在下拉菜单中选择的值。