CODEWITHSUNDEEP
jquery
Jim
Jim

Reputation: 5

multiple select boxes, get selected values using jquery

I have a grid with each row having a drop down list to select a state. What I want to do is upon submit of the form, grab each value selected (if none skip over)

<select name="state" class="dd1">
<option value="0">Select A State (optional)</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>

Now I can have up to 50 rows with the same select object in each row.

Currently I have the following put together that sort of works.

function UpdateCustomers()
{
  var getStatesUpdated = $("select.dd1").each(function (i) {
        var $this = $(this);
        if ($this.val() > 0) {
           return $this.val();
        }

  });

}

I say the above sort of works because if I put in a alert box in the above if statement, it lists each value selected. My goal here is to return a string of states comma delimited so getStatesUpdated would look like this if I selected 3 states out of 50 rows.

getStatesUpdated = "CO,MI,FL";

How can I return each selected item in a comma delimited string?

Thanks so much

Upvotes: 0

Views: 2486

Answers (2)

charlietfl
charlietfl

Reputation: 171700

Solution using map() , filter() and join()

function UpdateCustomers() {  
  return $("select.dd1").map(function () {
    return this.value;    
  }).get().filter(function(val){
      return val !== "0"
  }).join();  
}

$("button").click(function(){
  console.log(UpdateCustomers());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL" selected>Alabama</option>
  <option value="AK">Alaska</option>
</select>

<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK" selected>Alaska</option>
</select>

<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<button>Log selected</button>

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

jQuery .each() does not return a string as you seem to expect... But is returning jQuery... Read, the collection of the select.dd1 elements.

You should declare an array in the updateCustomers function... Then use .each() to loop the elements, then return a string made of the array elements joined with comas...

function UpdateCustomers() {
  var getStatesUpdated = [];
  $("select.dd1").each(function (i) {
    var $this = $(this);
    if ($this.val() !== "0") {
      getStatesUpdated.push($this.val())
    }
  });
  return getStatesUpdated.join(",")
}

$("button").click(function(){
  console.log(UpdateCustomers());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<select name="state" class="dd1">
  <option value="0">Select A State (optional)</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
</select>

<button>Log selected</button>

Upvotes: 1

Related Questions