How to store all selected values from 2 select boxes into an array with Jquery?

Question

I have 2 select boxies like this:

<div class="info">
    <select name="type" class="data" onchange="getData(this.value);">
        <option value="teacher">Teacher</option>
        <option value="student">Student</option>
    </select>
    <select name="class" class="data" onchange="getData(this.value);">
        <option value="1A">Class 1A</option>
        <option value="1B">Class 1B</option>
    </select>
</div>
<script>
    function getData() {
        var datas = [];
        $.each($('.data'), function (index, value) {
            if ($(value).prop('selected') == true) {
                datas.push($(value).val());
            }
        });
        console.log(datas);
    }
</script>

I want to store all selected values in a array when onchange event called. But my code not working, any help ?

For both drop down?

Bharat
– Bharat

2017-01-12 07:41:19 +00:00
Commented Jan 12, 2017 at 7:41 — Bharat
– Bharat, Commented Jan 12, 2017 at 7:41

Rory McCrossan · Accepted Answer · 2017-01-12 07:41:48Z

1

To achieve this using jQuery you can remove the outdated onchange attributes and use unobtrusive JS code to hook your events.

From there you can use map() to build an array from the selected values of all your .data elements. Try this:

$('.data').change(function() {
  var selectedValues = $('.data').map(function() {
    return $(this).val();
  }).get();

  console.log(selectedValues);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  <select name="type" class="data">
    <option value="teacher">Teacher</option>
    <option value="student">Student</option>
  </select>
  <select name="class" class="data">
    <option value="1A">Class 1A</option>
    <option value="1B">Class 1B</option>
  </select>
</div>

answered Jan 12, 2017 at 7:41

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bharat · Accepted Answer · 2017-01-12 07:48:54Z

0

You need to use each on .data to get all selected value from drop down. Check below code.

$(".data").on("change", function () {
  var datas = [];
    $(".data").each(function () {
        datas.push($(this).val());
    })
    console.log(datas);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
    <select name="type" class="data" >
        <option value="teacher">Teacher</option>
        <option value="student">Student</option>
    </select>
    <select name="class" class="data">
        <option value="1A">Class 1A</option>
        <option value="1B">Class 1B</option>
    </select>
</div>

answered Jan 12, 2017 at 7:48

Bharat

2,4643 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to store all selected values from 2 select boxes into an array with Jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related