Question

我的表单中有一个多选，我想显示一个文本框，并指定其他＆＃39;当＆＃39;其他＆＃39;在多选中被选中，或者单独选择，或者用其他东西选择。

这就是我想出来的，只是想知道如果没有＆＃39; for＃39;会有更快的方法吗？循环，以某种方式使用jQuery？

HTML

<div>
<select size="4" id='travel' name="Travel" multiple='multiple'>
    <option value="Air">Air</option>
    <option value="Sea">Sea</option>
    <option value="Train">Train</option>
    <option value="Car">Car</option>
    <option value="Bus">Bus</option>
    <option value="Animal">Animal</option>
    <option value="Walking">Walking</option>
    <option value="Other">Other</option>
</select>
</div>
<div id="otherTravel" class="clear">
    <p>Specifiy Other 
    <input type="text" name="otherTravel"/>
    </p>
</div>

的jQuery

$('#travel').change(function() {
var $selectionArray = $(this).val();
for (var i = 0; i < $selectionArray.length; i++) {
    if ($selectionArray[i] == 'Other') {
    $('#otherTravel').removeClass('clear');
    }
    else {
    $('#otherTravel').addClass('clear');
    }
}        
});

CSS

.clear {
    display: none;

Answer 1

$('#travel').change(function() {
  console.log($('option[value=Other]', this).is(':selected'))
  $('option[value=Other]', this).is(':selected') ? $('#otherTravel').removeClass('clear') : $('#otherTravel').addClass('clear');


});

.clear {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select size="4" id='travel' name="Travel" multiple='multiple'>
    <option value="Air">Air</option>
    <option value="Sea">Sea</option>
    <option value="Train">Train</option>
    <option value="Car">Car</option>
    <option value="Bus">Bus</option>
    <option value="Animal">Animal</option>
    <option value="Walking">Walking</option>
    <option value="Other">Other</option>
  </select>
</div>
<div id="otherTravel" class="clear">
  <p>Specifiy Other
    <input type="text" name="otherTravel" />
  </p>
</div>

使用attr选择器与选择的选择器结合使用
基于数值添加或删除类

Answer 2

您可以通过以下方式替换循环以在“其他”选项中查找：

jQuery有一个实用功能：

$.inArray(value, array)

返回数组中的值索引。如果数组不包含，则返回-1 值。

Answer 3

您只需使用indexOf查看数组是否包含＆＃34;其他＆＃34; -value：

$('#travel').change(function() {
  var selectionArray = $(this).val();
  if (selectionArray.indexOf("Other") > -1) {
    $('#otherTravel').removeClass('clear');
  } else {
    $('#otherTravel').addClass('clear');
  }
});

表格Multiselect选择了特定选项

3 个答案: