CODEWITHSUNDEEP
jqueryif-statementselect
penone
penone

Reputation: 792

Jquery If / Else with multiple select options

I have a form with a select field that allows for multiple options to be selected:

<label for="test">Select One</label>
<br/>
<select id="test" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

And fields that correspond to each value:

<label for="one">Enter One</label><input type="text" id="one">
<label for="two">Enter Two</label><input type="text" id="two">
<label for="three">Enter Three</label><input type="text" id="three">

What I am trying to do is have a span appended to the corresponding label that was selected and if the user selects multiple options it applies the span to multiple labels. This is where I am stuck as it is only applying to the first option I select:

var $span = $('<span class="form-required" title="This field is required.">*</span>');

$('#test').change(function(){
    var val = $(this).val();

if (val == '1') {
$('label[for="one"]').append($span);
}
else
if (val == '2') {
$('label[for="two"]').append($span);
}
else
if (val == '3') {
$('label[for="three"]').append($span);
}
});

How can I get this to work with multiple options?

Upvotes: 0

Views: 2020

Answers (2)

cpardon
cpardon

Reputation: 485

I don't think an if statement is necessary. I believe you want a click event...

See the example to see how EACH selected option is referenced. Then simply append for EACH

Upvotes: -1

charlietfl
charlietfl

Reputation: 171690

val() returned from a <select multiple> is an array.

You could add some attribute on each label that values can be matched to , then iterate the array

HTML

<label for="one" data-value="1">Enter One</label>

JS

 // use string or have to clone jQuery object each time
var span ='<span class="form-required" title="This field is required.">*</span>';

$('#test').change(function() {
  var values = $(this).val();// returns array
  // remove prior spans
  $('label[data-value]').find('span.form-required').remove();
  // loop over values
   values.forEach(function(val){
      // append to matching label
      $('label[data-value='+val+']').append(span);
   });

});

DEMO

Upvotes: 1

Related Questions