动态 ajax/php select 标签

Question

晚上好，我的动态 select 遇到了一个小问题，就像标题中已经说过的那样。我的目标是达到以下结果：如果某人 select 使用第一个 select 标签的乐器，另一个名为 "Besetzung" 的标签应该过滤演奏 selected 乐器的用户列表，对于第二个 select 标签如图所示 screenshot (Instrument = 乐器；E-Bass = 电贝司；Besetzung = 职业；Offen = 开放)

到目前为止一切正常。但我的问题是，我得到了 3 到 10 个这样的蓝框（截图）。您可以通过按钮手动添加这些框。每个盒子都应该包含这些 "individual" select 标签...所以我需要像每个 select 标签的唯一 ID，每次添加一个盒子。所以这是我到目前为止的动态 selection 函数：

function fetch_select(val)
{
    $.ajax({
     url: 'get_data.php',
     type: 'POST',
     data: {
        get_option:val.value
     },
     success: function (response) {
       document.getElementById("studentSelect").innerHTML=response; 
     }
  });
}

如果函数成功，则更改 ID "studentSelect" 的元素。但我需要的是类似数组的东西，它在我的 html、php 和 ajax 中用于更改每个元素...我不知道如何给每个元素单个 select 标记一个唯一的 ID，因为当有人使用该网站时，标记的数量会发生变化。

我希望你明白我的意思，对我来说有点难以解释。提前感谢您的帮助。

Answer 1

您通常会做的是对所有涉及的元素使用通用 class。

然后在更改事件中，您可以获得已更改的 select class 的特定实例，并使用它遍历到相应的其他 select 以填充

重复结构

<div class="row">
   <select class="select-1"></select>
   <select class="select-2"></select>
</div>

JS

$(document).on('change', '.select-1', function(){
   // traverse to closest row, then look within that row for matching select
   var $otherSelect = $(this).closest('.row').find('.select-2');
    $otherSelect.load('get_data.php', {get_option: this.value})
            .fail(function(){ alert('Oops something went wrong')});
});

Answer 2

所以你有两个 select 列表，第二个列表取决于第一个列表中 select 的内容。这是问卷中很常见的任务。

您做的第一件事是通过 ajax 更改第二个 select 列表，由第一个 select 列表中的更改触发，对吗？（很好）

所以你基本上需要的是 php（服务器端代码），即 returns 2d select 列表的 html。不是吗？

不管怎样，我们这里需要的是第一个列表中每个选项的选项列表。如果需要，该信息应该以表格或数组的形式出现在服务器端。

如果您为第一个列表的每个选项提供选项列表，那么我或其他人可以帮助您 php。

动态 ajax/php select 标签

Dynamic ajax/php select tag

html

javascript

php

ajax

jquery