Блог

У меня есть элемент выбора, который допускает множественный выбор. Я хотел бы отображать выбранные значения в другой части страницы (в div или чем-то еще), когда пользователь вносит изменения в то, что выбрано.

Является ли единственный способ сделать это, чтобы перебрать «параметры» и проверить, верно ли значение «выбрано»? это было бы нежелательно, поскольку каждое событие «onchange» потребовало бы повторения всего элемента выбора.

Вот скрипка, которая демонстрирует, как я сейчас это делаю, но я надеюсь, что, возможно, есть лучший способ, чем перебирать все параметры при каждом «изменении»: скрипка множественного выбора элемента onchange

.val() при множественном выборе возвращается массив.

Смотрите фрагмент ниже в качестве примера:

 $(function() {
    $('#fruits').change(function(e) {
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
    <option value="grape">Grape</option>
    <option value="watermelon">watermelon</option>
</select>  

В вашей скрипке я только что использовал .val() . Это возвращает массив

Ссылка на JSFiddle

 $(function() {
    $('#fruits').change(function() {
        console.log($(this).val());
    }); 
});
  

Если бы вы могли использовать jQuery, это могло бы быть так же просто, как:

 $('select').change(function() {alert($(this).val())})
  

Вы могли бы использовать размытие вместо изменения, чтобы выбор обрабатывался только один раз, а не при каждом выборе. http://jsfiddle.net/2mSUS/3

Вместо этого вы можете использовать :selected селектор jQuery, но я полагаю, что под капотом jQuery выполняет цикл для selected = true .

 element.addEventListener('click', function(){alert(this.value)})
  

Это решение на JS, вы можете довольно легко перенести его на jQuery. Идея состоит в том, чтобы добавить прослушиватель щелчков к каждой опции в выборе. Это не будет работать в IE8 и ниже из-за addEventListener , однако есть способы обойти это.

Я думаю, что это лучший подход, чем повторять по списку. Однако к каждому варианту должен быть подключен прослушиватель.

Это работает:

 var MyControl = document.getElementById('Control_ID');
var newValue = MyControl[MyControl.selectedIndex].value;
  

Конечно, Control_ID — это идентификатор элемента управления select.

Я выполняю отправку формы. Мой помощник по шаблону выглядит следующим образом:

  'submit #update': function(event) {
    event.preventDefault();
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
    var array_opts = Object.values(obj_opts);  //convert to array
    var stray = array_opts.map((o)=> o.text ); //to filter by: text, value or selected
    //stray is now ["Test", "Milk Free"] for example, depending on the selection
    //...do stuff...
}
  

Вы могли бы использовать аналогичный шаблон для ‘onchange’