从带有两个下拉列表的表格行中，获取选定的值 &哪个下拉菜单改变了 [英] From a table row with TWO dropdowns, get selected value & which drop-down changed
问题描述
我正在尝试更新表格内的两个级联下拉
你需要给你的 元素类名并使用相对选择器来选择同一行中的关联元素.
假设您的 html 是
//给它一个 id 属性<tr><td><select class="country" ....>..... </select></td><td><select class="state" ....>..... </select></td></tr></tbody>
那么你的脚本将是
$('#table').on('change', '.country', function() {var selectedValue = $(this).val();var row = $(this).closest('tr');//获取行var stateSelect = row.find('.state');//获取同一行中的另一个选择//让你通过 ajax 调用将 selectedValue 传递给你的控制器//在成功回调中，更新 stateSelect 的选项$.ajax({网址:...数据 { id: selectedValue },....成功:功能(数据){stateSelect.empty();$.each(data, function(item, index) {stateSelect.append($('<option></option>').val(iem.ID).text(item.Name));}}});}另请参考 在mvc 了解用于填充级联下拉列表的代码的详细信息(考虑按照第二个代码示例缓存选项以避免重复的 ajax 调用)
I am trying to update two cascading drop down inside a table there are many answers on SO for drop downs, but I was unable to find help on cascading updates inside a Table with dynamically added rows.
Given the many rows they all have varying Id's filter #Id does'nt work. So, How do I identify which rows Dropdown triggered the change & cascade the update another Dropdown/cell in the next col of the same row?
There are 2 DropDownList (select box) inside a table row cell. To simplify this, the first is Country -> Second is state. So a user is expected to select the country and then the state.
My pseudo algorithm:
- find which one was fired, and which row (unsure if its needed, should I wire in place)
- then fire an ajax call... to get the values based on country
- update the second drop down with value in the same table row.
- Case 1 Change country and then change state.
- Case 2 Just change State, but first get the Country value in the first dropdown of the same row.
I know how to get the change and value in a regular page, but how do I get those changes and update the adjacent dropdown.
$(document).on('change', 'select', function(){
var data = $(this).val();
alert(data);
});
Edit, Stephen request to show HTML
<tr>
<td>
//DropDown 1 (Imagine Country)
<span class="projectcodeid">
<select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"><option value=""></option>
<option value="1">Plumbing</option>
<option value="2">Modeling</option>
</select></span>
</td>
<td>
//DropDown 2 (Imagine State)
<input type="hidden" name="Records.Index" value="1">
<input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5">
<span class="timecode timecodeDdlId"> <select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"><option value=""></option>
</select></span>
</td>
<td>
<input name="Records[1].DataRecords[0].ID" type="hidden" value="">
<input class="hours" name="Records[1].DataRecords[0].Work" type="text" value="">
</td>
<td>
<input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
</td>
</tr>
Sample image for clarification
You need to give both your <select> elements class names and use relative selectors to select the associated element in the same row.
Assuming your html is
<table id="table"> // give this an id attribute
<tbody>
<tr>
<td><select class="country" ....> ..... </select></td>
<td><select class="state" ....> ..... </select></td>
</tr>
</tbody>
</table>
Then your script will be
$('#table').on('change', '.country', function() {
var selectedValue = $(this).val();
var row = $(this).closest('tr'); // get the row
var stateSelect = row.find('.state'); // get the other select in the same row
// make you ajax call passing the selectedValue to your controller
// in the success callback, update the options of stateSelect
$.ajax({
url: ...
data { id: selectedValue },
....
success: function(data) {
stateSelect.empty();
$.each(data, function(item, index) {
stateSelect.append($('<option></option>').val(iem.ID).text(item.Name));
}
}
});
}
Refer also better way to load 2 dropdown in mvc for details of the code for populating cascading dropdownlists (consider caching the options as per the 2nd code example to avoid repeated ajax calls)
这篇关于从带有两个下拉列表的表格行中，获取选定的值 &哪个下拉菜单改变了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
