How to get a multiple selection in JS

Question

I know this question has already been posted, but this this topic

didn't help me. I tried the two first solutions and none worked.

The first : I get an error about options being undefined (no matter how I tried to handle it) The second : as I'm working on meteor, "this.val()" is not a value, as this do not refer to the good object.

EDIT : Here is my code

HTML :

<select class="selectpicker show-tick" id="update-languages-1" data-selected-text-format="values">
  {{#each isoLangs 1}}
    {{#if selected}}
  <option disabled selected>{{name}}</option>
    {{else}}
  <option>{{name}}</option>
    {{/if}}
  {{/each}}
</select>

JS :

var learningLanguages = [],
    options = select && select.options,
    iLen = options.length;

for (var i = 0, ; i < iLen; i++)
  if (options[i].selected)
    learningLanguages.push(options[i].text);

As I said, I also tried with JQuery :

Template.profile.events({
  'submit form': function(event, tmpl){
    [...]
    var learningLanguages = [];
    $('#update-languages-1 :selected').each(function(){
      learningLanguages.push($(this).val()); 
    });
    return false;
  }
});

Could you suggest me another way to proceed ?

Thanks you

Your option(s) element are without the value attribute. You should add it. After that, the $select.val() will return an array containing the values from the selected option. Don't forget to add the "multiple" attribute to the select element as well (which allows to select more than one option), otherwise the $select.val() will return the unique value from the selected option (not as an array of values). — José Cabo, Apr 18 '15 at 16:11

José Cabo · Answer 1 · 2015-04-18T16:28:35.550

Select option elements need an value="" attibute:

<select multiple class="selectpicker show-tick" id="update-languages-1" data-selected-text-format="values">
  {{#each isoLangs 1}}
    {{#if selected}}
  <option value="{{name}}" disabled selected>{{name}}</option>
    {{else}}
  <option value="{{name}}">{{name}}</option>
    {{/if}}
  {{/each}}
</select>

If you want a to select several option (not only one), you should add the multiple attribute to the select.

You can simply use the .val() from the select to get the selected option values as an array (in case multiple select) or the selected option value (in case it is not multiple select):

var learningLanguages = $('#update-languages-1').val();

How to get a multiple selection in JS

1 Answers1