multi select on change from array with selectors-CodePudding

On a form that I am creating, I have multiple select boxes where the user can select multiple items from. Like I do with all the other inputs on the form. I make an array of all the selectors of the types of inputs and then go over each selector and check for an input change. But I am encountering an issue with the multi select input.

// 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');
    });

});

In the above code, I create an empty array. Then I push all the elements (I only have one for simplicity of the example.) Then for each of the items in the array I output the current value for testing. In the console I can see that it outputs '#specialties' Then I want to detect the change like this:

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

But for some reason it does not detect the change. Whenever I put in the ID instead of value it does fire.

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

Anyone any idea why this is. As far as I know, value and '#specialties' are the exact same thing. But I don't know everything, so I might learn a few new things when asking this question.

THE PROBLEM WAS A TYPO

My code was not working because I made a freaking typo on the third line. I wrote #specialties and I should have written #specialities notice the extra i.

Nonetheless, the solution provided by mplungjan is my accepted solution. Although, it ignores the array completely.

CodePudding user response：

Your code works

// 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>

Here is a better version

$(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>