Javascript-форум - Замена поля input на выподающий спискок

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Замена поля input на выподающий спискок (https://javascript.ru/forum/dom-window/29827-zamena-polya-input-na-vypodayushhijj-spiskok.html)

Замена поля input на выподающий спискок

Есть input со значением и рядом ссылка "изменить"
нужно при нажатии на ссылку заменить input списком select
где после выбора пункта из списка сново появляется input но уже
со значением выбранным из списка.
Возможно есть решение на js или на jquery.
Знаний js практически нет.
Может кто поможет или по советует как можно сделать.

Цитата:

Сообщение от fatory (Сообщение 188393)

<html>
<head>
<title></title>
<script>
function change() {
	var inp = document.getElementById("inp");
	if (inp) {
		//document.removeChild(inp);
		var sel = document.createElement("select");
		sel.onchange = function() { change_el(this.options[this.options.selectedIndex].value) };
		sel.setAttribute("id", "sel");
		var mas = [1,2,3,4,5,6], opt;
		for (i=0; i<mas.length; i++) {
			opt = document.createElement("option");
			opt.setAttribute("value", "opt"+i);
			opt.appendChild(document.createTextNode(i));
			sel.appendChild(opt);
		}
		inp.parentNode.replaceChild(sel, inp);
	}
}

function change_el(val) {
	var sel = document.getElementById("sel");
	if (sel) {
		var txt = document.createElement("input");
		txt.setAttribute("type", "text");
		txt.setAttribute("id", "txt");
		txt.setAttribute("value", val)
		sel.parentNode.replaceChild(txt, sel);
	}
}
</script>
</head>
<body>
<input type="text" id="inp"><a href="javascript:change();">Заменить</a>
</body>
</html>

Спасибо но у вас список создаётся в функции а если он уже есть
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
можно его как-то срывать и брать значение из него?

Цитата:

Сообщение от fatory (Сообщение 188450)

<html>
<head>
<title></title>
<style>
.hid {
	display: none;
}
.vis {
}
</style>
<script>
function change() {
	var inp = document.getElementById("inp");
	var sel = document.getElementById("sel");
	if (inp.className == "vis") {
		inp.className = "hid";
		sel.className = "vis";
	}
}

function change_el(val) {
	var inp = document.getElementById("inp");
	var sel = document.getElementById("sel");
	if (sel.className == "vis") {
		sel.className = "hid";
		inp.className = "vis";
		inp.value = val;
	}
}
</script>
</head>
<body>
<input type="text" id="inp" class="vis">
<select id="sel" onChange="change_el(this.options[this.options.selectedIndex].value)" class="hid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a href="javascript:change();">Заменить</a>
</body>
</html>

Спасибо то что нужно!