Обновить блок div, через jQuery
Несколько вопросов: в блоке есть два select
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><div class="position-relative row form-group">
<label for="exampleSelect" class="col-sm-2 col-form-label">Вид обращения</label>
<div class="col-sm-10">
<select class="selectpicker form-control" name="type" "required>
<!-- {{"/concept/order-type.1c"}} -->
</select>
</div>
<br>
<br></br>
<label for="exampleSelect" class="col-sm-2 col-form-label">Категория обращения</label>
<div class="col-sm-10">
<select id="selectcat" class="selectpicker form-control" data-live-search="true" name="typeС" required>
<!-- {{"/concept/order-type2.1c"}} -->
</select>
</div>
</div></p>Есть функция myFunction, которой я пытаюсь обновить список select, пытался через
var block = document.getElementById('main');
block.innerHTML = block.innerHTML;Пытался через
$("#main").load(location.href + " #main");Не выходит(. Что касается select и соответственно <option, строятся они с файла /concept/order-type.1c Мысль такая, есть ли возможность заменить блок, для перестроения из файла select (Категория обращения) , с возможностью подцепить новое значение select (Вид обращения)? Или просто повторить код нижнего select (Категория обращения), при выборе верхнего select (Вид обращения). С javascript работал очень мало, прошу прощения заранее, если что то неверно написал. Заранее спасибо)
Вся страница
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<!-- ============================================================== -->
<!-- wrapper -->
<!-- ============================================================== -->
<div class="dashboard-ecommerce">
<div class="dashboard-content">
<!-- ============================================================== -->
<!-- pageheader -->
<!-- ============================================================== -->
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="page-header">
<h2 class="pageheader-title">Новое обращение</h2>
<div class="page-breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<!-- {{П.Запрос.БазовыйURL}} -->/concept/index.html" class="breadcrumb-link">Главная</a></li>
<li class="breadcrumb-item active" aria-current="page">Новое обращение</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- end pageheader -->
<!-- ============================================================== -->
<div class="ecommerce-widget">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<form action="<!-- {{П.Запрос.БазовыйURL}} -->/concept/order-add.1c" id="MyForm" method="POST" class="needs-validation">
<div id="display"></div>
<p><div id="main" class="position-relative row form-group">
<label for="exampleSelect" class="col-sm-2 col-form-label">Вид обращения</label>
<div class="col-sm-10">
<select class="selectpicker form-control" name="type" "required>
<!-- {{"/concept/order-type.1c"}} -->
</select>
</div>
<br>
<br></br>
<label for="exampleSelect" class="col-sm-2 col-form-label">Категория обращения</label>
<div class="col-sm-10">
<select id="selectcat" class="selectpicker form-control" data-live-search="true" name="typeС" required>
<!-- {{"/concept/order-type2.1c"}} -->
</select>
</div>
</div></p>
<div class="position-relative row form-group"><label for="exampleText" class="col-sm-2 col-form-label">Ваше имя</label>
<div class="col-sm-10"><textarea name="namespec" class="form-controlName" rows="1" required></textarea></div>
</div>
<div class="position-relative row form-group"><label for="exampleText" class="col-sm-2 col-form-label">Текст обращения</label>
<div class="col-sm-10"><textarea name="description" class="form-control" rows="3" required></textarea></div>
</div>
<div class="position-relative row form-group"><label for="exampleText" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="submit" class="btn btn-primary" value="Отправить">
</div>
</div>
<script>
function myFunction() {
$("#main").load();
}
</script>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- end wrapper -->
<!-- ============================================================== -->СтрокаДанных = П.Запрос.ПолучитьТелоКакСтроку();
Рез = Новый Структура;
Рез.Вставить("type","");
Рез = лк_ОбщегоНазначения.ЗаполнитьЗначенияПараметров(СтрокаДанных, Рез);
КатегорияОбращения = Справочники.лк_ТипыОбращений.НайтиПоНаименованию(Рез.type);
ТекстЗапроса = "ВЫБРАТЬ
| лк_КатегорииОбращения.Ссылка КАК Ссылка,
| лк_КатегорииОбращения.Наименование КАК Наименование
|ИЗ
| Справочник.лк_КатегорииОбращения КАК лк_КатегорииОбращения
|ГДЕ
| НЕ лк_КатегорииОбращения.ПометкаУдаления
| И лк_КатегорииОбращения.ТипОбращения = &ТипОбращения
|
|УПОРЯДОЧИТЬ ПО
| Наименование";
Запрос = Новый Запрос(ТекстЗапроса);
Запрос.УстановитьПараметр("ТипОбращения",КатегорияОбращения);
Выборка = Запрос.Выполнить().Выбрать();
html = "value=''></option>"; // Добавим первое значение - пустую строку
Пока Выборка.Следующий() Цикл
html = html + Символы.ПС;
html = html + "<option data-tokens='" + Выборка.Наименование + "' value='" + Выборка.Ссылка.УникальныйИдентификатор() + "'>" + Выборка.Наименование + "</option>";
КонецЦикла;Источник: Stack Overflow на русском