Как в зависимости от выбранной опции менять текст span'а?

Question

[Гриша Никольский]

Здравствуйте. У меня есть выпадающий список. Каким образом я могу динамически менять текст внутри span в зависимости от выбранной опции в списке? Я сделал доп.атрибут data-number, куда записываю цифровые индексы для каждой опции. Также я создал словарь, где ключ - это вот этот индекс, а значение - текст, который нужно вставить внутри <span>. Как на основе словаря и списка сделать динамическую (без перезагрузки страницы) замену текста внутри данного тега?
Заранее спасибо!

Answer 1

[Александр Таратин]

https://jsfiddle.net/QW01_01/ftx75Ljo/

var selector = document.getElementById('target-select');
var messageContainer = document.getElementById('message-container');

var dict = {
'0': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod',
'1': 'tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
'2': 'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo',
'3': 'consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse',
'4': 'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non',
'5': 'proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}

function onSelect(){
	messageContainer.innerHTML = dict[selector.options[selector.selectedIndex].value];
}

selector.addEventListener('change', onSelect);

onSelect();