Работа с выпадающем списком select на JavaScript

В данном видео мы изучим работу с выпадающем списком select с помощью JavaScript. Мы научимся получать значение и текст выбранного пункта списка разными способами, добавлять новые пункты списка, а также работать с мультиселектами.

Исходники кода

<select>
	<option value="one">Option one</option>
	<option value="two" selected>Option two</option>
	<option value="three">Option three</option>
</select>

<button>click me</button>

var select = document.querySelector('select');
var button = document.querySelector('button');

//select.add(new Option('text', 'value', true, true));

/*select.addEventListener('change', function() {
	console.log(this.value);
});*/

button.addEventListener('click', function() {
	//console.log(select.value);
	//console.log(select.selectedIndex);
	
	//select.value = 'one';
	//select.selectedIndex = 2;
	
	//console.log(select.item(0));
	//console.log(select[0]);
	
	//console.log(select.querySelectorAll('option'));
	//console.log(select.options);
	/*for (var i = 0; i < select.options.length; i++) {
		console.log(select.options[i].text);
		console.log(select.options[i].value);
		console.log(select.options[i].selected);
	}*/
	
	//select[0].selected = true;
	
	//console.log(select[select.selectedIndex].text);
	//console.log(select.querySelector('option[selected]'));
	
	//console.log(select.selectedOptions);
	//console.log(select.selectedOptions[0].text);
	
	//select.add(new Option('text', 'value', true, true));
	
	select.length = 0;
});