Добрый день!
Прошу помощи исправить ошибки в скрипте, может вообще перечеркнете и дадите cвый вариант...
Задача сделать 4 выпадающих связанных списка без перезагрузки страницы.
Использовал скрипт из Интернете и пытался перестроить под себя. Три списка работает правильно, с четвертым не получается... Т.е. не отображается и соо-но не передается значение в <select> Услуга
<script>
$(document).ready(function () {
$('#sub_subsection').css('display', 'none');
$('#s_category').css('display', 'none');
$('#s_service').css('display', 'none');
$("#get_section").change(function() {
clearlist();
$('#s_category').css('display', 'none');
var sectionvalue = $("#get_section option:selected").val();
if (sectionvalue === '') {clearlist(); $('#sub_subsection').css('display', 'none'); }
$('#s_service').css('display', 'none');
var categoryvalue = $("#get_category option:selected").val();
if (categoryvalue === '') {clearlist(); $('#service').css('display', 'none'); }
getarea();
})
function getarea() {
var section_value = $("#get_section option:selected").val();
var p_id = $("#page_id").val();
var area = $("#get_subsection");
var getarea_value = area.val();
if (section_value === "") {
area.attr("disabled",true);
} else {
area.attr("disabled",false);
area.load('get_subsection.php',{section : section_value, page_id : p_id});
$('#sub_subsection').css('display', 'block');
}
$("#get_subsection").change(function() {
getcategory();
})
}
function getcategory() {
var subsection_value = $("#get_subsection option:selected").val();
if(subsection_value == undefined)
{
var subsection_value = $("#subsection_id").val();
}
var p_id = $("#page_id").val();
var area = $("#get_category");
if (subsection_value === "") {
area.attr("disabled",true);
$('#s_category').css('display', 'none');
$("#get_category").empty();
} else {
area.attr("disabled",false);
area.load('get_category.php',{subsection : subsection_value, page_id : p_id});
$('#s_category').css('display', 'block');
}
$("#get_category").change(function() {
getservice();
})
}
function getservice() {
var category_value = $("#get_category option:selected").val();
if(category_value == undefined)
{
var category_value = $("#category_id").val();
}
var p_id = $("#page_id").val();
var area = $("#get_service");
if (category_value === "") {
area.attr("disabled",true);
$('#s_service').css('display', 'none');
$("#get_service").empty();
} else {
area.attr("disabled",false);
area.load('get_service.php',{service : category_value, page_id : p_id});
$('#s_service').css('display', 'block');
}
}
function clearlist() {
$("#get_subsection").empty();
$("#get_category").empty();
$("#get_service").empty();
}
});
</script>
и форма
<tr>
<th class="title_th">Раздел</th>
<td>
<select id="get_section" name="get_section" style='width: 99%;' required>
<?php
$rez=mysqli_query($mysqli , "SELECT * FROM `catalog_section` ");
$c=0;
echo "<option value=''></option>";
while($sr=mysqli_fetch_array($rez)){$c++;
echo "<option value='".$sr['id']."'>".$sr['section']."</option>";
}
?>
</select>
</td>
<td style="width:20px; border-left-style: none;"></td>
</tr>
<tr>
<th class="title_th">Подраздел</th>
<td>
<div id="sub_subsection">
<select id="get_subsection" name="get_subsection" style='width: 99%;'></select>
</div>
</td>
<td style="width:20px; border-left-style: none;"></td>
</tr>
<tr>
<th class="title_th">Категория</th>
<td>
<div id="s_category">
<select id="get_category" name="get_category" style='width: 99%;'></select>
</div>
</td>
</tr>
<td style="width:20px; border-left-style: none;"></td>
</tr>
<tr>
<th class="title_th">Услуга</th>
<td>
<div id="s_service">
<select id="get_service" name="get_service" style='width: 99%;'></select>
</div>
</td>
</tr>
<td style="width:20px; border-left-style: none;"></td>
</tr>
