Я заменил первый дочерний параметр собственным текстом, чтобы переопределить все 3 раскрывающихся списка. Когда я затем выбираю категорию, подкатегория меняется на текст по умолчанию "-------". Я хотел бы сохранить назначенный текст для всех опций первого ребенка независимо от выбора.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("select[name=category]").on("change", function() {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name'] > option:first-child").text('Recipe');
if($(this).val() == "") {
$("select[name=subcategory]").prop('disabled', 'disabled');
$("select[name=name]").prop('disabled', 'disabled');
} else {
$("select[name=subcategory]").removeAttr("disabled");
if($("select[name=subcategory]").val() == "") {
$("select[name=name]").prop('disabled', 'disabled');
} else {
$("select[name=name]").removeAttr("disabled");
}
}
}).trigger('change');
$("select[name=subcategory]").on("change", function() {
if($(this).val() == "") {
$("select[name=name]").prop('disabled', 'disabled');
} else {
$("select[name=name]").removeAttr("disabled");
}
}).trigger('change');
});
</script>
<title>Document</title>
</head>
<body>
<select name="category">
<option value="">----------</option>
<option value="suv">suv</option>
<option value="sedan">sedan</option>
</select>
<select name="subcategory">
<option value="">----------</option>
<option value="honda">honda</option>
<option value="toyota">toyota</option>
</select>
<select name="name">
<option value="">----------</option>
<option value="200x">200x</option>
<option value="400x">400x</option>
</select>
</body>
</html>