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

从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

Answer 2

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

请参阅example以了解如何引用EACH选择选项。然后只需附加到每个

Jquery If / Else有多个选择选项

2 个答案: