我正在使用 jquery 选择菜单。selectmenue one 会在用户单击表格绑定后动态填充,并且 selectmenue one 会根据 selectmenue one 填充。
我试图对 selectmenue 使用 click 事件(因为我必须使用 ajax 从后端获取数据),但是每行中的每个 selectmenue 都会触发该事件。何我每行每个选择菜单只能触发一个事件?
<table>
<thead>
<tr>
<th>
Collection Date
</th>
<th>
Facility
</th>
<th>
Catagory
</th>
<th>
Test
</th>
</tr>
</thead>
<tr>
<td>
May 14 1984
</td>
<td>
JHH
</td>
<td>
<select id="catagorySelect" name="catagorySelect">
<option value="55327">Select All</option>
</select>
</td>
<td>
<select id="testSelect" name="testSelect">
<option value="55327">Select All</option>
</select>
</td>
</tr>
<tr>
<td>
April 14 2006
</td>
<td>
JHH
</td>
<td>
<select id="catagorySelect" name="catagorySelect">
<option value="55327">Select All</option>
</select>
</td>
<td>
<select id="testSelect" name="testSelect">
<option value="55327">Select All</option>
</select>
</td>
</tr>
</table>
$('body').on('click','#catagorySelect-button',function(e){
var url = '<%= Url.Action("GetCatagoryListDropDown", "Document") %>';
var contextKey=$('select#catagorySelect').val();
$.ajax({
type: "POST",
url: url,
data: { contextKey:contextKey },
success: function(data, textStatus, jqXHR) {
var options = [];
$.each(data, function(i, el) {
options.push("<option value='"+ el["Value"] +"'>"+ el["Text"] +"</option>");
});
$('select#catagorySelect').append(options.join("")).selectmenu();
}
});
});