How to get array from dropdown and input box values to loop over total number in JQuery

Question

I have multiple drop down and corresponding number input fields like this:

<div>
<div class="col-md-12 row">
    <div class="col-md-3">
        <select class="form-control category-select" name="category[]">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
    <div class="col-md-3">
        <input class="form-control category-number" name="no_of_category[]">
    </div>
</div>
<div class="col-md-12 row">
    <div class="col-md-3">
        <select class="form-control category-select" name="category[]">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
    <div class="col-md-3">
        <input class="form-control category-number" name="no_of_category[]">
    </div>
</div>
<div>

If user selects

option A and 2 as number
option B and 3 as number

Then I want Array something like following so that I can loop over total no of category with name.

A -> 1
A -> 1
B -> 1
B -> 1
B -> 1

Since Array can't have same index, This is not possible. But, What I actually want is loop over total number of category along with category name. Is there any way to achieve something similar to loop similar to above ?

Any kind of suggestion appreciated.

Sagar, do you want to get the array by a button click or while the user make the input? — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jun 28, 2017 at 5:58
@madalinivascu I'm new to jquery, I have done this before in php associative array like this: array(0=>array(A=>1), 1=>array(A=>1), 2=>array(B=>1)... — Sagar Gautam
– Sagar Gautam, Commented Jun 28, 2017 at 6:05

Carsten Løvbo Andersen · Accepted Answer · 2017-06-28 06:10:49Z

You're "Wanted" result don't look like an array in jquery, but maybe this will help you create what you want.

$('.category-select, .category-number').change(function() {
  var rowParent = $(this).closest(".row").parent();
  var obj = [];
  $(rowParent).children(".row").each(function() {
    var row = $(this)
    var selectVal = $(row).find("select").val();
    var inputVal = $(row).find("input").val();

    if (inputVal !== "") {
      for (i = 0; i < inputVal; i++){
        obj.push(selectVal)
      }
    }
  });
  if (obj.length > 0) console.log(obj)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="col-md-12 row">
    <div class="col-md-3">
      <select class="form-control category-select" name="category[]">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
    <div class="col-md-3">
      <input class="form-control category-number" type="number" name="no_of_category[]">
    </div>
  </div>
  <div class="col-md-12 row">
    <div class="col-md-3">
      <select class="form-control category-select" name="category[]">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
    <div class="col-md-3">
      <input class="form-control category-number" type="number" name="no_of_category[]">
    </div>
  </div>
  <div>

Collectives™ on Stack Overflow

How to get array from dropdown and input box values to loop over total number in JQuery

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