How to obtain and save the value of a listing in HTML

Question

How to obtain and save the value of a listing in HTML

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

0

I'm trying to select several values of <select>

<select>
  <option value="0">Seleccionar</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

Example: when choosing Volvo I need to save the value in an object and show it the value to know which option I chose, then select in the Audi list and save the information again in the same object where it is the value of Volvo and that the object shows me Volvo and Audi and continue in that way until I no longer need to choose another value from the list.

Example of how the values selected in the list would appear on the screen:

Is this possible with the <select> object?

javascript html

asked by ARR 24.07.2018 в 23:26

source

3 answers

Minor Search does not work properly Chess board in java

score 2 · Answer 1

I think what you're looking for in a multiple select:

<select multiple>
  <option value="0">Seleccionar</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

score 1 · Answer 2

What you are trying to do is a multiselect, what you can do is the following:

Add the attribute multiple within the tag <select>

It would be as follows:

<select multiple>
  <option value="0">Seleccionar</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

To obtain the selected values we can use Jquery:

$("#multiple").change(function() {
  var data = $(this).val();
  console.log(data);
});

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

<select id="multiple" multiple>
  <option value="0">Seleccionar</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

score 1 · Answer 3

I made the following code where the values are stored in an object and the values are printed in console.log the options that have been selected:

var cars = [];

$('#carVal').on('change', function(){
  var val = $('#carVal option:selected').val();
  cars.push(val);
  console.log(cars);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="carVal" multiple>
  <option value="0">Seleccionar</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

I hope I help you.