get all the values of a select when loading the page

Question

get all the values of a select when loading the page

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have the following code, it turns out that I want to capture all the Values of a Select hidden once the page is loaded in Html , capture them in Javascript and send them by means of a JSON to the controller of 'laravel.

Here is the code, thank you very much for your help:

            <div>
                <select name="annios[]" id="annios" hidden multiple="multiple">
                    @foreach($precebo as $fecha)
                        <option value="{{$fecha->año_destete}}">{{$fecha->año_destete}}</option>
                    @endforeach
                </select>
            </div>

This is what the array generates:

var array =$("[name='annios[]']").val();

I think it may be a mistake when I generate it.

javascript jquery html laravel

asked by Juan Esteban Yarce 28.03.2018 в 23:45

source

2 answers

Show message after opening of Form Join repeated items in a list

score 2 · Answer 1

The problem is that .val() is going to return only the selected value of select (or failing that of the first option ) but not an array of values of option . Also, as it is being done, only the select is selected and not the option .

What you could do is select all option , scroll them using each and save their values in an array. Something like this:

var miArray = [];

$("[name='annios[]'] option").each(function() {
  miArray.push($(this).val());
}); 

console.log(miArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select name="annios[]" id="annios" hidden multiple="multiple">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
  </select>
</div>

score 0 · Answer 2

Generalized function, for wider use.

function current__select__values(id) {
 const e = document.getElementById(id);
 return Array.apply(null,Array(e.options.length)).
 map((cur, i, arr) => {
  return arr[i] = {
            selectName: e.options[i].text,
            selectValue: e.options[i].value
            };
 });
}

var data = current__select__values("f"); // Datos guardados aquí
    console.log(data);

<select id="f">
<option value="H4"> 4 Hamburgesas </option>
<option value="B9"> 9 Bebidas </option>
</select>