jeudi 9 février 2017

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?

Aucun commentaire:

Enregistrer un commentaire