multi select 从数组更改为 select 或

Question

在我创建的表单上，我有多个 select 框，用户可以从中 select 多个项目。就像我处理表单上的所有其他输入一样。我制作了一个包含输入类型的所有 selectors 的数组，然后遍历每个 selector 并检查输入更改。但是我遇到了 multi select 输入的问题。

// Multiselect
var multiSelect = [];
multiSelect.push('#specialties');

$.each(multiSelect, function(index, value) {

    console.info({ value }); // Outputs: '#specialties'

    // This fires
    $('#specialities').change(function(){
      console.info('test');
    });

    // This does not fire?
    $(value).change(function(){
      console.info('test');
    });

});

在上面的代码中，我创建了一个空数组。然后我推送所有元素（为了简化示例，我只有一个。）然后对于数组中的每个项目，我输出当前的 value 进行测试。在控制台中我可以看到它输出 '#specialties' 然后我想检测这样的变化：

$(value).change(function(){
    console.info('test');
});

但由于某种原因它没有检测到变化。每当我输入 ID 而不是 value 时，它都会触发。

$('#specialties').change(function(){
    console.info('test');
});

任何人都知道这是为什么。据我所知，value 和 '#specialties' 是完全相同的东西。但我不是什么都懂，所以问这个问题时我可能会学到一些新东西。

问题是错字

我的代码无法运行，因为我在第三行打错了字。我写了 #specialties 我应该写 #specialities 注意额外的 i.

尽管如此，mplungjan 提供的解决方案是我接受的解决方案。虽然，它完全忽略了数组。

Answer 1

您的代码有效

// Multiselect
var multiSelect = [];
multiSelect.push('#specialties');

$.each(multiSelect, function(index, value) {

  console.info({value}); // Outputs: '#specialties'

 
  // This ALSO fires
  $(value).change(function() {
    console.info('test');
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="specialties" multiple>
  <option value="">Please select</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

这是一个更好的版本

$(function() {
  $("#container").on("change", "select", function(e) {
    const selectedValues = $(this).val();
    console.log(Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
  <select id="specialties" multiple>
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

multi select 从数组更改为 select 或

multi select on change from array with selectors

jquery

arrays

jquery-selectors

onchange

multi-select