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