Множественный элемент выбора - onchange

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

Это единственный способ сделать это, чтобы перебрать "параметры" и проверить, истинно ли "выбрано"? это не было бы предпочтительнее, поскольку каждое событие "onchange" потребовало бы повторного итерации всего элемента select.

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

Ответ 1

Отметьте jsFiddle Link

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

Ответ 2

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

ссылка JSFiddle

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

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

 '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'