Как выбрать несколько элементов из option с помощью JS?

Question

[Valera Dobroman]

<span class="selected_lang"></span>
<div class="new_lang"></div>
<input type="text" class="lang_css" id="lang_css" list="lang" name="new_language" placeholder="Язык:" value="<?
?>">
	<datalist id="lang">
	        <option value="English" class="lang1 lang_li">English</option>
		        <option value="Russian" class="lang2 lang_li">Русский</option>
			<option value="German" class="lang4 lang_li">der Deutsch</option>
			<option value="Japanese" class="lang5 lang_li">日本語</option>
	</datalist>

Js code

let langs = document.querySelectorAll('.lang_li');
// console.log(langs);
let lang_input = document.querySelector('.lang_css');

let selected_lang = document.querySelector('.selected_lang');

let new_lang = document.querySelector('.new_lang');

lang_input.onchange = function() {
for (let i = 0; i < langs.length; i++){
	if (this.value == langs[i].value) {
		if (!langs[i].hasAttribute('disabled')){
		langs[i].setAttribute('disabled','');
		new_lang.innerHTML += langs[i].value;
		selected_lang.innerHTML += new_lang;
		this.value = '';
		saved_sel = selected_lang;
		}else {this.value = ''}
	}else {
		console.log('no');
	}
}
}

Я хочу чтобы в спан был див, и в этом диве было значение с option типа того:

<span class="selected_lang"><div class="new_lang">English</div></span>

После чего значение "English" убиралось из option, и дальше я выбираю другое значение, оно должно добавиться к "English" например;

<span class="selected_lang"><div class="new_lang">English</div><div class="new_lang">German</div></span>

Как-то так это должно выглядеть, поможете пожалуйста реализовать?

Comments

[Сергей Горностаев]

Какое отношение тег java имеет к вопросу?

Answer 1

[Шохрух Шаймардонов]

Используйте атрибут "multiple" у select и уже после выбора значений 1 раз пройдитесь циклом по выбранным значениям и запишите их.
Полагаю хотите что-то на подобии выбор тегов/категории (как например в топ же самом тостере, при выборе тегов, только через селект)

Comments

[Valera Dobroman]

Да, именно что-то на подобии выборов тегов.

[Шохрух Шаймардонов]

Valera Dobroman, ну так я предложил вам вариант. Вам осталось написать код, реализующий данную логику

[Valera Dobroman]

Шохрух Шаймардонов, а как сделать это с инпутом, например как на этом же сайте, когда я пишу тэг вопроса, там появляется тэг после того как я нажал на одну из опций ?

[Шохрух Шаймардонов]

Valera Dobroman, ну тогда вешайте обработчик на нажатие enter после ввода текста (т.е. при пустом поле можно предотвратить действие) и вставьте в блок значение инпут, а сам инпут очистите