Для множественного выбора формы выбран определенный параметр

#jquery #html

#jquery #HTML

Вопрос:

У меня есть multiselect в моей форме, и я хочу отобразить текстовое поле «указать другое», когда «другое» выбрано в multiselect, либо само по себе, либо выбрано с помощью чего-то другого.

Это то, что я придумал, просто интересно, будет ли более быстрый способ без цикла ‘for’, используя 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;

Ответ №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 в сочетании с выбранным селектором
на основе числового значения добавить или удалить класс

1. Спасибо за решение. Не могли бы вы уточнить, что это значит: $(‘option[value=Other]’, this).is(‘:selected’) ? $(‘#otherTravel’).removeClass(‘очистить’): $(‘#otherTravel’).addClass(‘очистить’);

2. это означает, что если выбран параметр со значением Other , удалить класс, очистить от #otherTravel другого добавить класс

3. Я понимаю эту часть, но, в частности, ? в этой строке я никогда не видел, чтобы она использовалась раньше. Имейте в виду, что я использую jQuery всего несколько недель.

4. это троичный оператор, который работает так же, как if else . ? -> if : -> else

Ответ №2:

Вы можете просто использовать indexOf, чтобы узнать, содержит ли массив «Другое» значение:

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

Ответ №3:

Вы можете заменить цикл, чтобы найти в «Другом» параметр выбран или нет:

Для этого в jQuery есть служебная функция:

 $.inArray(value, array)

Возвращает индекс значения в массиве. Возвращает -1, если массив не содержит
значения.