How to Get All Selected Values of a Multiple Select Box

How to get all selected values from select multiple=multiple?

The usual way:

var values = $('#select-meal-type').val();

From the docs:

In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option;

How to get all selected values of a multiple select box?

No jQuery:

// Return an array of the selected opion values
// select is an HTML select element
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

Quick example:

<select multiple>
  <option>opt 1 text
  <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>

Get selected value from multiple select on change in dynamic form

You can get all selected values in array as below:

function displayColorSelected() {
    var selected_value = $("[id='color-options']").toArray().map(x => $(x).val());
    console.log(selected_value);
}

Note: id selector will always return single element which will be first with that id. So you're getting value for first select only.

You can use attribute selector ([]) instead which will find every element with given id. So here $("[id='color-options']").toArray() will find every element with id equal to color-options and map(x => $(x).val()) will return only value part from the elements array.

How to get all selected values from multiple select option?

Use name as like problems[] instead of problems

//Simple Form and getting the values

<form name="s" method="post" action="" >
 <select multiple="multiple" name='problems[]' id='problems' class="inpBox multiple" size='50' style="height:150px;" >
        <option value="Cannot Copy">Cannot Copy</option>
        <option value="Cannot Print">Cannot Print</option>
        <option value="Cannot Print">Cannot Scan</option>
        <option value="Cannot Fax">Cannot Fax</option>
        <option value="Lines Appear When Printing/Copying">Lines Appear When Printing/Copying</option>
        <option value="Scan to Email Failed">Scan to Email Failed</option>
        <option value="Toner Low/Empty">Toner Low/Empty</option>
        <option value="Others">Others</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>


<?php 
if (isset($_POST['submit'])) {
    $problems =  implode(',', $_POST['problems']);
    echo $problems;
}
?>

Get selected values in a multi-select drop-down and insert them in a JSON

This is the right solution :

const addGenreTextbox = document.getElementById('selectGenre');

let GenreChoix = []
for (var i = 0; i < addGenreTextbox.options.length; i++) {
    if (addGenreTextbox.options[i].selected) {
        let result = {};
        result["id"] = addGenreTextbox.options[i].value;
        result["Nom"] = addGenreTextbox.options[i].text.trim();
        GenreChoix.push(result);
    }
}

How to get all selected values from a multi-select when some values are disabled?

Use option:selected, not option[selected]. The latter only matches options that have the selected attribute in their HTML; you have to use :selected to test their current state of selection.

Also, .val() only returns the value of the first element selected. If you want to get all the values of a multi-select, you need to map over them.

var selected_values = $(ele).find("option:selected").map(function() {
    return this.value;
}).get();

How to get multiple select box values using jQuery?

jQuery .val()

  var foo = $('#multiple').val(); 

How to get multiple selected values of select box in php?

If you want PHP to treat $_GET['select2'] as an array of options just add square brackets to the name of the select element like this: <select name="select2[]" multiple …

Then you can acces the array in your PHP script

<?php
header("Content-Type: text/plain");

foreach ($_GET['select2'] as $selectedOption)
    echo $selectedOption."\n";

$_GET may be substituted by $_POST depending on the <form method="…" value.

javascript bootstrap-multiselect get all selected values on button click

Working fiddle.

You're missing the id sign # in the following line :

var allVal=$("ddlPermission").val();

Should be :

var allVal=$("#ddlPermission").val();

Hope this helps.

multiple select boxes, get selected values using jquery

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>