Я добавил динамические строки в таблицу с выпадающими списками, которые зависят друг от друга (каскадирование).Я могу успешно добавить динамические строки с этими раскрывающимися списками, но проблема в том, как я собираюсь заполнить значения второго раскрывающегося списка (подкатегории) на основе выбранных значений в первом раскрывающемся списке (категории)?[Пожалуйста, посмотрите это изображение]: https://imgur.com/sKQ304k
Я уже могу заполнить значения в первом раскрывающемся списке, который имеет значение из базы данных, но я все еще ищу способ заполнить значения во второмпадать.Я попытался заполнить данные, используя жестко закодированные значения (см. Коды ниже), и это работает правильно.Но когда я выбираю значения в базе данных, вот где я борюсь.
CONTROLLER
//To populate data in second dropdown list
public ActionResult GetPSESubcategories(Guid pse_category_id)
{
List<SelectListItem> subCategories = new List<SelectListItem>();
var subCategoryList = PopulateDropdown.GetPSESubcategory(pse_category_id);
return Json(subCategoryList, JsonRequestBehavior.AllowGet);
}
VIEW
<div class="row" style="display:none;" id="patientExperienceDiv">
<div class="table-responsive" style="padding-left:8px !important;">
<table class="table">
<thead>
<tr>
<th style="border-bottom:none !important;border-top:none !important;">
<text style="font-weight:500 !important;"><strong>II.</strong> Categories</text><br />
<text style="font-size:12px;color:#a5a5a5;font-weight:400 !important;">Please select.</text>
</th>
<th style="border-bottom:none !important;border-top:none !important;">
<text style="font-weight:500 !important">Subcategories</text><br />
<text style="font-size:12px;color:#a5a5a5;font-weight:400 !important;">Please select.</text>
</th>
<th style="border-bottom:none !important;border-top:none !important;"></th>
<th style="border-bottom:none !important;border-top:none !important;"></th>
<th style="border-bottom:none !important;border-top:none !important;"></th>
</tr>
</thead>
<tbody id="multipleCategoryTbl">
<tr>
<td style="border-bottom:none !important;border-top:none !important;">
<div style="padding-top:2px">
@Html.DropDownListFor(a => a.addedCategory, new SelectList(ViewBag.PSECategories, "Value", "Text"), "Select Category", new { @class = "form-control", @id ="cat" })
</div>
</td>
<td style="border-bottom:none !important;border-top:none !important;">
<div style="padding-top:2px;">
@Html.DropDownListFor(a => a.addedSubcategory, new SelectList(ViewBag.PSESubcategories, "Value", "Text"), "Select Subcategory", new { @class = "form-control field", @disabled = "disabled", @id = "sub" })
@Html.EditorFor(a => a.addedSubcategory, new { htmlAttributes = new { @class = "form-control field", @readonly = "readonly", @id = "nature", @style = "display:none;" } })
</div>
</td>
<td style="border-bottom:none !important;border-top:none !important;">
<button type="button" class="form-control btn btn-default btn-sm" id="addNewCategoryBtn" style="text-align:center !important;">
<i class="fa fa-plus"></i>
</button>
</td>
<td style="border-bottom:none !important;border-top:none !important;">
<button type="button" class="form-control btn btn-default btn-sm" id="removeNewCategoryBtn" onclick="remove_row('multipleCategoryTbl')" style="text-align:center !important;">
<i class="fa fa-remove"></i>
</button>
</td>
<td style="border-bottom:none !important;border-top:none !important;"><input type="text" class="form-control" id="textId" name="ids" value="0" /></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
<script>
$(function () {
$('#cat').change(function () {
getSelectedItem(this, null);
});
$('#addNewCategoryBtn').click(function () {
addRow('multipleCategoryTbl');
});
//sample hard-coded values that must be replaced by javascript on cascading dropdown list values from database
var jsonObj = { "category1": ["subcat 1"], "category2": ["subcat 2.1", "subcat 2.2"], "category3": ["subcat 3.1", "subcat 3.2", "subcat 3.3"] };
var keys = Object.keys(jsonObj);
var category_dropdown = document.getElementById("cat");
var getSelectedItem = function (element, row) {
$("#sub").prop("disabled", false);
var e = element;
var selectedCategory = e.options[e.selectedIndex].value;
alert(selectedCategory); //selected value in the first dropdown list
var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("sub"));
alert(sub_category_dropdown.nodeValue); //check the values of second dropdown list
sub_category_dropdown.options.length = 0;
for (var i = 0; i < jsonObj[selectedCategory].length; i++) {
sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i], jsonObj[selectedCategory][i]);
}
};
//to dynamically add table rows
var addRow = function (tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.childNodes[0].selectedIndex = 0;
}
var selects = row.getElementsByTagName("select");
selects[0].addEventListener('change', function () { getSelectedItem(this, row) }, false);
};
//this must be the place where the values of second dropdown is populated
for (var keys in jsonObj) {
category_dropdown[category_dropdown.length] = new Option(keys, keys);
}
});
Это отдельный javascript, который я сделал для каскадного выпадающего списка, но я не знаю, где его вставить в функцию getSelectedItem
$("#cat").on('change', function () {
alert($(this).val());
$("#sub").prop("disabled", false);
$("#sub").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetPSESubcategories", "PSERegistry")',
dataType: 'json',
data: { pse_category_id: $(this).val() },
success: function (subCategories) {
$("#sub").append($('<option></option>').val('').text('Select Subcategory'));
$.each(subCategories, function (i, sub) {
$("#sub").append('<option value ="' + sub.Value + '">' + sub.Text + '</option>');
});
//Update the data in subcategory dropdown upon selection of category
$("#sub").trigger("chosen:updated");
$("#sub").trigger("liszt:updated");
},
error: function () {
alert('Please select Category.');
}
});
return false;
});
UPDATE:
Я изменил javascript для раскрывающегося списка каскадирования, и вот что у меня есть,
<script>
$('#cat').change(function () {
alert('test');
getSelectedItem(this, null);
});
var category_dropdown = document.getElementById("cat");
function getSelectedItem(element, row) {
$("#sub").prop('disabled', false);
$("#sub").empty();
var e = element;
var selectedCategory = e.options[e.selectedIndex].value;
alert(selectedCategory);
$.ajax({
type: 'POST',
url: '@Url.Action("GetPSESubcategories", "PSERegistry")',
dataType: 'json',
data: { pse_category_id: selectedCategory },
success: function (subCategories) {
var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("sub"));
sub_category_dropdown.options.length = 0;
$("#sub").append($('<option></option>').val('').text('Select Subcategory'));
$.each(subCategories, function (i, sub) {
sub_category_dropdown[sub_category_dropdown.length] = new Option(sub.Text, sub.Value);
//alert(sub.Value);
});
},
error: function () {
alert('Please select Category.');
}
});
};
function addRow(table_id) {
alert('new row added');
var table = document.getElementById(table_id);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
alert(rowCount);
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.innerHTML);
//alert(newcell.childNodes[0].type);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = rowCount;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
var selects = row.getElementsByTagName("select");
selects[0].addEventListener('change', function () {
alert('clicked');
getSelectedItem(this, row)
}, false);
}
Каскадный раскрывающийся список внутри динамически добавляемых строк уже работает, нопервая строка (исходная строка для дублирования при динамическом добавлении) затрагивается всякий раз, когда я выбираю другой раскрывающийся список в других строках.
Может ли кто-нибудь помочь мне с этим?Заранее спасибо.