Jquery的如果/其他具有多个选择选项

Question

我有一个选择字段，该字段允许多个选项的形式来选择：

<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> 

和字段对应于每个值：

<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"> 

我想要做的是将一个跨度附加到所选的相应标签上，如果用户选择了多个选项，则将跨度应用于多个标签。这是我卡住的地方，因为它只适用于我选择的第一个选项：

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); 
} 
}); 

我怎样才能使这个工作与多个选项？

Answer 1

我不认为if语句是必要的。我相信你想要点击事件...

请参阅example以了解如何引用每个选定的选项。然后简单追加EACH

Answer 2

val()从<select multiple>返回的是一个数组。

你可以认为值可以匹配每个标签上增加一些属性，然后遍历数组

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