Я не знаю контекста этого кода, поэтому я понятия не имею, является ли этот шаблон «вложенных» параметров и выборок лучшим решением. Но вот моя версия javascript, которая, кажется, достигает того, что было задано в вопросе. Я прокомментирую соответствующие изменения, чтобы мой мыслительный процесс был ясен. Я также добавил css для класса hide, так как его не было в jsfiddle.
$(document).ready(function () {
$("select").on('change', function () {
var selClass = $(this).attr("class");
var selName = $(this).attr("name");
var selVal = $(this).children("option:selected").val();
//Call the update function with the data of the changed Select
updateRecursivly(selClass, selName, selVal);
//Recursive function to update all selects, this allows for multiple "child" selects per select and an in theory infinite "tree" of selects
function updateRecursivly(selClass, selName, selVal) {
//Search "children" of the parent select
var children = $("select." + selClass + "[data-parent='" + selName + "']");
if (children.length) {
children.each(function () {
//Hide all options in the "child" select
$(this).children("option[data-parent]").hide();
//if selVal is an empty string, the default option is selected and we should just hide the "child" select
if (selVal !== "") {
//Get all options that contain (*=) selVal in "data-parent"
var options = $(this).children("option[data-parent*='" + selVal + "']");
//If there are possible options show the select and the possible options. Else hide select
if (options.length) {
$(this).removeClass('hide');
options.show();
} else {
$(this).addClass('hide');
}
} else {
$(this).addClass('hide');
}
//If the select is updated, the options should be reset. Any selected is reset and the first is selected
//From here https://stackoverflow.com/a/16598989/14040328 this is apparently safer against reset events than other solutions
$(this).children("option:selected").prop("selected", false);
$(this).children("option:first").prop("selected", "selected");
//Get the name of the select
var childName = $(this).attr("name");
//Update the Child select
updateRecursivly(selClass, childName, "");
});
}
}
});
});
.hide {
display: none;
}
Я не уверен, переборщил ли я с комментариями или нет, если что-то неясно не стесняйтесь комментировать.