Дубликаты во втором зависимом выпадающем списке

Question

я новичок, решил для автоматизации процессов создать веб-ресурс для ведения учета кадров. По сути это CRUD-приложение с модальными окнами, и сложностей быть не должно, но в силу своей неопытности не могу решить задачу с использованием зависимых выпадающих списков. При выборе значения из первого списка, во втором списке появляются значения связанные с первым, но значения берутся не из одной формы а из всех форм на странице. Ниже скриншоты, как это выглядит в браузере и как выглядит код этого элемента, а так же код. Я примерно понимаю принцип работы того, что мне требуется, но код js для меня еще сложен. прошу помочь в решении.

modal.php

<!-- Modal Edit-->
<?php $a = 0; ?>
<div class="modal fade" id="editModal<?=$value['id_user'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content shadow">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Редактировать запись № <?=$value['id_user'] ?></h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form id="form" action="?id=<?=$value['id_user'] ?>" method="post">
        <div class="form-group">
            <input type="text" class="form-control" name="edit_last_name" value="<?=$value['last_name'] ?>" placeholder="Фамилия">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="edit_name" value="<?=$value['name'] ?>" placeholder="Имя">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="edit_surname" value="<?=$value['surname'] ?>" placeholder="Отчество">
        </div>
      <div class="form-group">
            <select class="form-control" name="edit_sub" id="edit_sub">
                <?php foreach ($result1 as $value1) { ?>
                <option value="<?php echo $value1['ssub_id'];?>"><?php echo $value1['subdivision'];?></option>
                <?php } ?>
            </select>
    </div>
    <div class="form-group">
  <select class="form-control" name="edit_pos" id="edit_pos">
    <?php foreach ($result2 as $value2) { ?>
    <option id="<?= $a++; ?>" value="<?php echo $value2['pos_sub_id'];?>"><?php echo $value2['position'];?></option>
    <?php } ?>
  </select>
  </div>
        <div class="modal-footer">
            <button type="submit" name="edit-submit" class="btn btn-primary">Обновить</button>
        </div>
    </form>
  </div>
</div>

js-dependent.js

var $select1 = $( 'select[id=edit_sub]').each(function(i,el){
el.id=el.id+i;
    }),
    $select2 = $( 'select[id=edit_pos]').each(function(i,el){
el.id=el.id+i;
    }),
$options = $select2.find('option');

$select1.on( 'change', function() {
$select2.html( $options.filter('[value="' + this.value + '"]'));
} ).trigger( 'change' );

Answer 1

В первую очередь Вам нужно исправить формирование пунктов селекта edit_pos добавив атрибут parent_id равным pos_sub_id, а value должно быть равным pos_id (или какой у Вас в базе индекс)

<option parent_id="<?php echo $value2['pos_sub_id'];?>" value="<?php echo $value2['pos_id'];?>"><?php echo $value2['position'];?></option>

//проходим по всем формам
$('form').each((i, form) => {
  //ищем селект с именем edit_sub в текущей форме
  const $sub = $(form).find('select[name=edit_sub]');
  // а также селект с именем edit_pos
  const $pos = $(form).find('select[name=edit_pos]');
  // находим все пункты селекта edit_pos
  const $posOptions = $pos.find('option');
  // привязываем обработчик на изменения в edit_sub
  $sub.change( e => {
    // проходим по всем пунктам
    $posOptions.each((i, el) => {
      const $el = $(el);
      // и скрываем те, в которых атрибут parent_id !== выбранному пункту (значение атрибута value) в edit_sub
      $el.attr('hidden',  $el.attr('parent_id') !== e.target.value)
    });
    // находим индекс первого элемента для выбранного родителя
    const optionIndex = $pos.find('option[parent_id='+e.target.value+']:first').index();
    // и делаем его выбранным
    $pos.prop('selectedIndex', optionIndex);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Первая форма</h3>
<form>
<select name="edit_sub">
  <option value="1" selected>Родитель 1</option>
  <option value="2">Родитель 2</option>
  <option value="3">Родитель 3</option>
</select>

<select name="edit_pos"> 
  <option parent_id="1" value="1" selected>Значение 1 Родитель 1</option>
  <option parent_id="1" value="2">Значение 2 Родитель 1</option>
  <option parent_id="1" value="3">Значение 3 Родитель 1</option>
  <option parent_id="2" value="4">Значение 1 Родитель 2</option>
  <option parent_id="2" value="5">Значение 2 Родитель 2</option>
  <option parent_id="2" value="6">Значение 3 Родитель 2</option>
  <option parent_id="2" value="7">Значение 4 Родитель 2</option>
  <option parent_id="3" value="8">Значение 1 Родитель 3</option>
  <option parent_id="3" value="9">Значение 2 Родитель 3</option>
</select>
</form>


<h3>Вторая форма</h3>
<form>
<select name="edit_sub">
  <option value="1" selected>Родитель 1</option>
  <option value="2">Родитель 2</option>
  <option value="3">Родитель 3</option>
</select>

<select name="edit_pos"> 
  <option parent_id="1" value="1" selected>Значение 1 Родитель 1</option>
  <option parent_id="1" value="2">Значение 2 Родитель 1</option>
  <option parent_id="1" value="3">Значение 3 Родитель 1</option>
  <option parent_id="2" value="4">Значение 1 Родитель 2</option>
  <option parent_id="2" value="5">Значение 2 Родитель 2</option>
  <option parent_id="2" value="6">Значение 3 Родитель 2</option>
  <option parent_id="2" value="7">Значение 4 Родитель 2</option>
  <option parent_id="3" value="8">Значение 1 Родитель 3</option>
  <option parent_id="3" value="9">Значение 2 Родитель 3</option>
</select>
</form>

БЛОГ НА HUSL

Дубликаты во втором зависимом выпадающем списке

Ответы (1 шт):