JQuery: add selected values in array

Question

I am trying to get the values of selected elements, add them to an array and send. But my code is not working.

<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="row d-flex justify-content-center mt-100">
  <div class="col-md-6">
    <select id="choices-multiple-remove-button" multiple>
      <option value="Acupuncturist" /> Acupuncturist</option>
      <option value="Holistic Care" /> Holistic Care</option>
      <option value="Naturopathic Doctor" /> Naturopathic Doctor</option>
    </select>
  </div>
</div>

$(document).ready(function() {
  var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
    removeItemButton: true,
  });
});

$('#scrape').on('click', () => {
  var brands = $('#choices-multiple-remove-button option:selected');
  var specialty = [];
  $(brands).each(function(index, brand) {
    specialty.push([$(this).val()]);
  });
  console.log(specialty);

  $.post('/wellness', { 'specialty': specialty }, (res) => {});
});

"But my code is not working." - This "problem description" is useless... Why do you think it "does not work"? What happens instead? Any errors? What have you tried to fix it on your own? — Andreas
– Andreas, Commented Jun 16, 2020 at 13:34
@MerianosNikos A snippet doesn't really help here because the markup is incomplete (and the $.post() call won't do anything) — Andreas
– Andreas, Commented Jun 16, 2020 at 13:36
specialty.push([$(this).val()]); - you push an array every time. It should be specialty.push($(this).val());. I'm also not sure how Choices play with jQuery — Mosh Feu
– Mosh Feu, Commented Jun 16, 2020 at 13:36
Also, you don't need to wrap brands with $ because it's already a jQuery object. — Mosh Feu
– Mosh Feu, Commented Jun 16, 2020 at 13:40
Thank you, you're right. specialty.push ($ (this) .val ()); works — Alexander
– Alexander, Commented Jun 16, 2020 at 14:11

Carsten Massmann · Accepted Answer · 2020-06-16 14:00:29Z

I prepared the following snippet along the lines of Andreas's and Mosh Feu's comments. Maybe you can explain, what it is that does not work here?

(I commented out the $.post() part as this will not work in an SO snippet.)

$(document).ready(function() {
  var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
    removeItemButton: true,
  });
});

$('#scrape').on('click', () => {
  var brands = $('#choices-multiple-remove-button option:selected');
  var specialty = [];
  brands.each(function(index, brand) {
    specialty.push($(this).val());
  });
  console.log(specialty);
  // $.post('/wellness', { 'specialty': specialty }, (res) => {});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="row d-flex justify-content-center mt-100">
  <div class="col-md-6">
    <select id="choices-multiple-remove-button" multiple>
      <option value="Acupuncturist" /> Acupuncturist</option>
      <option value="Holistic Care" /> Holistic Care</option>
      <option value="Naturopathic Doctor" /> Naturopathic Doctor</option>
    </select>
  </div>
  <button id="scrape">scrape</button>
</div>

Collectives™ on Stack Overflow

JQuery: add selected values in array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related