Почему не подгружаются значения в select?

@gor4akov · Регистрация: 15.01.2025

Студворк — интернет-сервис помощи студентам

Здравия уважаемому сообществу. Нашел по поиску данную тему которая во частично описывает мою проблему. У меня вопрос чуть шире, буду признателен, если пособите с решением:

делаю для магазина создание заказа с выпадающими зависимыми списками, с подгрузкой информации в зависимый список средствами ajax (методом load())

далее код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul class="product-item">
                <li>
                    <div class="row g-3 purchases_block" id="list">
                    <div class="col-md-4 col-xs ">
                        <select class="form-select" id="flowers" name="product[]">
 
                            здесь форичится родительский список
 
                        </select>
                    </div>
                    
                    <div class="col-md-3 product-sorts">
                       <select class="form-select" id="sorts" name="sorts[]">
 
                                       сюда методом load подгружается зависимый список
                       </select>
        </div>
              </div>
 
                </li>
           </ul>

собственно скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let newProduct = $('.product-item li');
    newProduct.clone(true);
 
    $('.add_link').on('click', function (){
        $(newProduct).clone(true).appendTo('.product-item').fadeIn('slow').find('#flowers').focus()
    })
 
newProduct.parent().on('change', '#flowers', function (){
        let flowerId = parseInt($(this).val());
        selectSort(flowerId);
    })
 
    function selectSort(res){
        let sorts = $('#sorts');
        let divSorts = $('.product-sorts');
        divSorts.hide();
        clearList(sorts);
        if(res > 0){
            divSorts.fadeIn('slow');
            sorts.attr('disabled', false);
            //sorts.removeAttr('id');
            sorts.load(
                "https://fr.loc/sales/add_flower_sale",
                {
                    res: res,
                    csrf_token: csrf,
                })
        }
    }

если форма одна - то все в порядке, данные подгружаются, зависимый список создается.
а вот,

ВОПРОС:
при создании клона формы данные методом load подгружаются в первый открывшийся зависимый список, а не в той же строке, в которой выбирается родительская категория.
Как сделеть, чтоб в каком блоке (<li></li>) выбираешь родительский список, в той и подгружались соответсвующие данные зависимого.
И чтоб при открытии последующих клонированных форм - так же данные выбирались и зависимый список создавался бы в этой же новой строке.

надеюсь понятно объяснил. Спасибо всем за участие!

@voraa · 17.01.2025, 08:37

У вас при клонировании возникают элементы с одинаковыми id
id должен быть уникальным на странице
Если несколько элементов с одинаковым id, то

JavaScript
1
let sorts = $('#sorts');

Возьмет первый из них.

@gor4akov · 17.01.2025, 15:16 **[ТС]**

Спасибо за ответ. До этого я тоже додумался - я не знаю как сделать чтоб был разный. Я догадываюсь, что как то перед(или после) вызова метода load нужно убирать id, знаю методы в jquery как это сделать, но в каком месте кода и как это применить - не разумею...

krvsa · 17.01.2025, 15:28

Сообщение от gor4akov

я не знаю как сделать чтоб был разный

Не обязательно иметь дело именно с неким ИД...
Можно иметь дело с тем же классом. Но нужно правильно определять ключевого родителя, например тот же <li>...</li>. И уже в нем искать "свой" класс sorts.

@gor4akov · 17.01.2025, 15:58 **[ТС]**

Спасибо за ответ. До этого я тоже додумался - я не знаю как сделать чтоб был разный. Я догадываюсь, что как то перед(или после) вызова метода load нужно убирать id, знаю методы в jquery как это сделать, но в каком месте кода и как это применить - не разумею...

попробовал после вызова функции создания нового клона удалять атрибут id:

JavaScript
1
2
3
4
5
$('.add_link').on('click', function (){
        $(newProduct).clone(true).appendTo('.product-item').fadeIn('slow').find('#flowers').focus();
        let sorts = $('#sorts');
        sorts.removeAttr('id');
    })

но как-то странно помогло - в первой строке в зависимом списке значения остаются как надо, во-второй строке - как надо, а в третьей и последующих зависимых списках значения подгружаются как в первом.
Я запутался.

Добавлено через 1 минуту
а можно пример, как это сделать в коде. Я понимаю, что не обязательно по ID искать блок, только не понимаю, ка правильно использовать вариант, который вы описали.

krvsa · 17.01.2025, 16:23

Сообщение от gor4akov

а можно пример, как это сделать в коде

Так примеры нужно самому предоставлять - тогда на них можно точнее показывать разные варианты...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
 
<button>Добавить</button>
<ul></ul>
<template>
    <li>
        <select>
            <option></option>
            <option>Раз</option>
            <option>Два</option>
            <option>Три</option>
        </select>
    </li>
</template>
<script>
$('button').on('click', _ => {
    const o = $('template').get(0).content.cloneNode(true)
    $('ul').append(o)
})
$('ul').on('change', e => {
    const o = $(e.target)
    const val= o.find("option:selected").text()
    const op = o.parents('li')
    const i = op.parent().find('li').index(op)
    alert(`Выбрали "${val}" в пункте ${i}`)
})
</script>
</body>
</html>

@gor4akov · 17.01.2025, 17:52 **[ТС]**

Да я бы рад, если б понимал какую часть кода надо представить, чтоб на ней показывать. Я что имею на данный момент - в шапке темы представил, до чего по ходу додумался сам - тоже написал.

Спасибо за вариант, буду разбираться, пробовать. Отпишусь, когда на свой код перенесу пример.

Добавлено через 1 час 22 минуты
Боюсь показаться тупым, но не пойму, чем ваш код принципиально отличается от моего. Кроме, если я правильно разобрал, более точного указания родителя элементов списка option.
Но по факту, как я щас опробовал, он делает то же, что и мой:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
let newProduct = $('.product-item li');
    newProduct.clone(true);
 
 $('.add_link').on('click', function (){
        $(newProduct).clone(true).appendTo('.product-item').fadeIn('slow').find('#flowers').focus();
    })
 
    // *********** Зависимые списки *********
    newProduct.parent().on('change', '#flowers', function (){
        let flowerId = parseInt($(this).val());
        selectSort(flowerId);
    })

Может быть я что-то не понял - но в коде я не увидел решения проблемы - чтобы в зависимый список, методом load() подгружалось содержимое по id выбранном в родительском списке этой же строки.

Могу привести код страницы, если так удобнее:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>
 
 
 
  <link rel="stylesheet" href="https://fr.loc/assets/bootstrap/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <style>
    .product-sorts{ display:none }
    .add{cursor: pointer; text-decoration: underline}
  </style>
</head>
 
<body>
  <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <form  method="post" id="flower_purchase">
      <div class="container">
 
        <ul class="product-item">
          <li>
            <div class="row g-3 purchases_block" id="list">
              <div class="col-md-4 col-xs ">
                <select class="form-select" id="flowers" name="product[]">
                  <option selected value="">Наименование</option>
                  <option class="tab" data-id="1"  value="1">Выбор РАЗ</option>
                  <option class="tab" data-id="2"  value="2">Выбор ДВА</option>
                  <option class="tab" data-id="3"  value="3">Выбор ТРИ</option>
                </select>
              </div>
 
              <div class="col-md-3 product-sorts">
                <select class="form-select sort-select" id="sorts" name="sorts[]">
                
                </select>
              </div>
 
              <div class="col-md-1 remove_var">
                <a href="#" id="delete" title="Удалить"><i class="bi bi-x-circle"></i></a>
              </div>
            </div>
          </li>
        </ul>
 
 
        <br>
 
 
        <div class="row g-3">
            <span class="add" id="add_purchase"><i class="add_link">Добавить позицию</i></span>
                <button type="submit" class="btn btn-success" form="flower_purchase">ЖАМК</button>
        </div>
      </div>
    </form>
  </main>
</body>
 
 
<script>
  const dependList = [ 'Завимимый выбор РАЗ','Завимимый выбор ДВА', 'Завимимый выбор ТРИ'];
 
 
  $('.product-item').on('click', '#delete',  function() {
    $('#list').parent().fadeOut(200, function() { $(this).remove(); });
    return false;
  });
 
  // *********** Добавление клонированных строк *********
  let newProduct = $('.product-item li');
  newProduct.clone(true);
 
  //$(newProduct).remove();
  $('.add_link').on('click', function (){
    $(newProduct).clone(true).appendTo('.product-item').fadeIn('slow').find('#flowers').focus();
    /*let sorts = $('#sorts');
    sorts.removeAttr('id');*/
  })
 
  // *********** Зависимые списки *********
  let csrf = $('meta[name="csrf-token"]').attr('content');
 
  newProduct.parent().on('change', '#flowers', function (){
    let flowerId = parseInt($(this).val());
    selectSort(flowerId);
  })
 
  function selectSort(res){
    let sorts = $('#sorts');
    let divSorts = $('.product-sorts');
    divSorts.hide();
    clearList(sorts);
    if(res > 0){
      divSorts.fadeIn('slow');
      sorts.attr('disabled', false);
      sorts.load(
              "https://file.loc",
              {
                res: res,
              });
 
    }
  }
  
</script>
</html>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
if($_POST['res']){
$data = (int)$_POST['res'];
 
$sorts = db()->query(SELECT * FROM sorts WHERE flower_id = $flower_id)
 
if($sorts){
$result = "<option selected value=''>Сорт</option>";
foreach ($sorts as $sort){
$result .= '<option value="' . $sort['id']. '">'. $sort['name'] . '</option>';
}
}
exit($result);
}

@voraa · 17.01.2025, 18:40

Сообщение от gor4akov

Могу привести код страницы, если так удобнее:

Стр 92 let sorts = $('#sorts'); - Что именно вы получаете? После клонирования у вас несколько элементов с id="sorts"
Стр 93 let divSorts = $('.product-sorts'); После клонирования у вас несколько элементов с классом .product-sorts' и в divSorts вы получите их все. И некоторые функции jq будут работать со всеми ими сразу.

PS Как я не люблю jq! Ванила в 10 раз понятнее.

Добавлено через 11 минут

Сообщение от gor4akov

но в коде я не увидел решения проблемы

А никто и не решал вашу проблему. Вам просто указали на ошибку.
Еще раз укажу. Раз вы что то клонируете - не используйте id. Работайте с классами, с атрибутами data-*, но не с id.
И если вам нужен какой то подэлемент в клоне, то и ищите его в клоне, а не во всем документе.

krvsa · 17.01.2025, 18:56

Сообщение от gor4akov

но в коде я не увидел решения проблемы

Ну на "нет"... И суда нет.

@gor4akov · 17.01.2025, 21:24 **[ТС]**

Я понял, что мне указали на ошибку. Я не понял как ее исправлять.
Можете еще 10 раз указать на ошибку, к знанию синтаксиса и логики JS меня это не приблизит.
Хорошо, я удалил id и выбираю родительский список по классу, по тегу, по $(this).
Как и где в коде мне выбрать родительский тег <li> внутри которого только что аяксом подгрузился зависимый список сортов?

@voraa · 17.01.2025, 21:37

Сообщение от gor4akov

к знанию синтаксиса и логики JS меня это не приблизит.

Тогда, сначала учить, потом делать.
Если кто то напишет вам готовое, это тоже не приблизит вас к знанию js.
А все время готовый код писать вам никто не будет.

Сообщение от gor4akov

Как и где в коде мне выбрать родительский тег <li>

Читать учебник
https://learn.javascript.ru/
Конкретно по работе с DOM
https://learn.javascript.ru/dom-nodes

Изучать MDN
https://developer.mozilla.org/... ject_Model

PS Конкретно для поиска родителей есть метод closest

Про jquery ничего не подскажу, использовал давно и мало, и почти все забыл.

krvsa · 17.01.2025, 21:38

Сообщение от gor4akov

Как и где в коде мне выбрать родительский тег <li> внутри которого только что аяксом подгрузился зависимый список сортов?

Если можешь грузить в нужное место - там и определяй родительский "тег <li>".
Как это сделать - есть в моем примере.

Сообщение от gor4akov

к знанию синтаксиса и логики JS меня это не приблизит

Значит пора начать таки читать учебники.

Ети познания могут приблизить.

Добавлено через 1 минуту
gor4akov, скорее всего ты вообще не понимаешь сути происходящего... От этого и все твои проблемы.

@gor4akov · 24.01.2025, 21:45 **[ТС]**

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

Так или иначе, - должен поблагодарить, своими ответами вы направили мои мысли в нужном русле - искать решение не "снизу->вверх", а "сверху->вниз". Я пытался найти решение отталкиваясь от дочерних элементов DOM а правильным оказалось наоборот. Вот о какой логике я говорил.

Я новичек на форуме, читая правила, я так понял, что тут принято, в случае успешного решения вопроса, выкладывать результат. Может кому еще пригодиться.
Заодно может попинаете мой (ну, точнее, лишь адаптированный мной под свою задачу) код.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <ul class="product-item"></ul>
            <template>
                <li>
                    <div class="row g-3 purchases_block list">
                        <div class="col-md-4 col-xs product">
                            <select class="form-select" data-id="<?= $table  ?>" id="" name="<?= $table  ?>-product[]">
                                <option selected value="">Наименование</option>
                                <?php foreach(selectData($table) as $item) :?>
                                    <option class="tab"  value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
 
                        <div class="col-md-3 product-sorts">
                            <select class="form-select" id="sorts" name="sorts[]">
 
                            </select>
                     
                        <div class="col-md-1 remove_var">
                            <a href="#" class="delete" title="Удалить"><i class="bi bi-x-circle"></i></a>
                        </div>
                    </div>
                </li>
            </template>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Добавляем клон элемента списка 
    $('.add_link').on('click', f => {
    const cloneLi = $('template').get(0).content.cloneNode(true)
    $('ul.product-item').append(cloneLi)
})
 
let csrf = $('meta[name="csrf-token"]').attr('content');
 
    // Отслеживаем событие Change и отправляем запрос на сервер
$('ul').on('change', e => {
    const o = $(e.target)
    const flDiv = o.parents('.product')
    const val= flDiv.find("option:selected").val()
    const op = o.parents('li')/*.css({'border': '1px solid red'})*/
    const i = op.parent().find('li').index(op)
    //const sorts = op.find('div').filter(':hidden')
    const sorts = op.find('.product-sorts')
    //console.log(`Выбрали "${val}" в пункте ${i}`)
    if (flDiv && val > 0){
        $.ajax({
            url: 'sales/ajax',
            method: 'POST',
            data: {res: val, csrf_token: csrf},
            success: function (res) {
                sorts.html('<select name="sort[]" class="form-select">' + res + '</select>')
                sorts.fadeIn('slow');
                sorts.attr('disabled', false);
                },
            error: function (res){
                res = JSON.parse(res);
                console.log(res)
            }
        })
    }
    //const sortI = sorts.find("option:selected").val()
})
 
    // удаляем элемент списка
$('.product-item').on('click', '.delete', function (){
    console.log('click!')
    let del = $(this).parents('li')
    del.last().remove()
 
})

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  public function addCart(){
        if (request()->isAjax()){
            if($_POST['res']){
                $data = (int)$_POST['res'];
 
                $sorts = db()->findAllbyCondition('sorts', $data, 'flower_id');
                if($sorts){
                    //$result = json_encode(['success' => $sorts]);
                    $result = "<option selected value=''>Наименование</option>";
                    foreach ($sorts as $sort){
                        $result .= '<option value="' . $sort['id'] . '">'. $sort['name'] . '</option>';
                    }
                } else {
                   // $result = json_encode(['error' => 'No sorts']);
                    $result = '<option value="-"> -- Нет сорта -- </option>';
                }
                echo $result;
                exit;
            }
        }
    }

В общем, еще раз, всем причастным спасибо. Буду учиться дальше.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@gor4akov 0 / 0 / 0 Регистрация: 15.01.2025 Сообщений: 6
	17.01.2025, 15:16 [ТС]
	Спасибо за ответ. До этого я тоже додумался - я не знаю как сделать чтоб был разный. Я догадываюсь, что как то перед(или после) вызова метода load нужно убирать id, знаю методы в jquery как это сделать, но в каком месте кода и как это применить - не разумею... 0

@gor4akov 0 / 0 / 0 Регистрация: 15.01.2025 Сообщений: 6
	17.01.2025, 21:24 [ТС]
	Я понял, что мне указали на ошибку. Я не понял как ее исправлять. Можете еще 10 раз указать на ошибку, к знанию синтаксиса и логики JS меня это не приблизит. Хорошо, я удалил id и выбираю родительский список по классу, по тегу, по $(this). Как и где в коде мне выбрать родительский тег <li> внутри которого только что аяксом подгрузился зависимый список сортов? 0