зависимые списки 1с-Битрикс

<?
CModule::IncludeModule("iblock");
$arSection = array();
$arFilter = array('IBLOCK_ID' =>  13, 'ACTIVE' => 'Y', 'SECTION_ID' => 0);
$db_list = CIBlockSection::GetList(array(), $arFilter, true);
while($ar_result = $db_list->GetNext()) {
	$arSection[$ar_result['ID']] = $ar_result;
}
$arSelect = Array("ID", "NAME", "DATE_ACTIVE_FROM", "IBLOCK_SECTION_ID");
$arFilter = Array("IBLOCK_ID" => 13, "ACTIVE" => "Y", 'SECTION_ID' => array_keys($arSection));
$res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
while($ob = $res->GetNext())
{
	$arRaions[] = $ob;
}
?>

$(function() {
	$(".obl select").change( function() {		
		let id = $(this).find('option:selected').data('id');
		$(".rai .jq-selectbox__dropdown li").each(function() {
			$(this).hide();
			if($(this).data('id') == id) {
				$(this).show();
			}
		});
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calculator">
<form id="calcFormsNoModal">
	<h2 class="calculator__title">Зависимый список</h2>

	<div class="calculator__line obl">
		<div class="form-error form-error--noOblast-js">Выберите область.</div>
		<label class="calculator__label">Область</label>
	<select class="calculator__select" name="obls">
							<option data-id="0" value="">Выберите область</option>
							<?foreach($arSection as $section):?>								
								<option data-id="<?=$section['ID'];?>" value="<?=$section['NAME'];?>"><?=$section['NAME'];?></option>
							<?endforeach;?>
						</select>
	</div>
	<div class="calculator__line rai">
		<div class="form-error form-error--noRayons-js">Выберите район.</div>
		<label class="calculator__label">Район</label>
<select class="intro-form__select" name="rais">
							<option data-id="0" value="">Выберите район</option>
							<?foreach($arRaions as $raion):?>
								<option data-id="<?=$raion['IBLOCK_SECTION_ID'];?>" value="<?=$raion['NAME'];?>"><?=$raion['NAME'];?></option>
							<?endforeach;?>
						</select>
	</div>
  </form>
  </div>