Javascript-форум - Вывести значения value из select в input

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

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Вывести значения value из select в input (https://javascript.ru/forum/events/50724-vyvesti-znacheniya-value-iz-select-v-input.html)

Jeick9

09.10.2014 01:02

Вывести значения value из select в input

Здравствуйте. Пытаюсь вывести значения value из select. Мне нужно динамически подставлять это значения в input, соответственно при каждом изменении селекта. Подскажите пожалуйста как это попроще сделать?

<select name="sitetime" id="sitetime" onchange="with (this) document.getElementById ('rez').innerHTML =
             (selectedIndex) ? options [selectedIndex].text / 15 - 1 : '3'">

<option value="1" >60</option>
<option value="2" >90</option>
<option value="2" >120</option>
<option value="3" >150</option>
<option value="3" >180</option>
<option value="4" >210</option>
<option value="4" >240</option>
<option value="5" >270</option>
<option value="5" >300</option>
</select>

krasovsky

09.10.2014 08:03

Да так же и делай на ончейнж

<input id="myInp" >
<select name="sitetime" id="sitetime" onchange="document.getElementById('myInp').value= this.value">

<option value="1" >60</option>
<option value="2" >90</option>
<option value="2" >120</option>
<option value="3" >150</option>
<option value="3" >180</option>
<option value="4" >210</option>
<option value="4" >240</option>
<option value="5" >270</option>
<option value="5" >300</option>
</select>

ksa	09.10.2014 08:41

Цитата:

Сообщение от Jeick9

как это попроще сделать?

Как вариант...

<select name="sitetime" id="sitetime" onchange="document.getElementById('rez').value=value">
	<option value="" ></option>
	<option value="1" >60</option>
	<option value="2" >90</option>
	<option value="2" >120</option>
	<option value="3" >150</option>
	<option value="3" >180</option>
	<option value="4" >210</option>
	<option value="4" >240</option>
	<option value="5" >270</option>
	<option value="5" >300</option>
</select>
<input type='text' id='rez' />

Jeick9

09.10.2014 23:16

Спасибо за помощь

burlesk32

24.11.2015 18:42

А что если у меня есть 2 select и в зависимости от выбранных пунктов редактировать значение в 3-х полях

рони	24.11.2015 19:07

burlesk32,
делайте макет и подробное описание

zoOmer

26.07.2017 18:18

А как вставить несколько выбранных значений через запятую?

j0hnik

26.07.2017 18:21

Цитата:

Сообщение от zoOmer (Сообщение 459764)

А как вставить несколько выбранных значений через запятую?

<select name="sitetime" id="sitetime" onchange="document.getElementById('rez').value+=value+','">
	<option value="" ></option>
	<option value="1" >60</option>
	<option value="2" >90</option>
	<option value="2" >120</option>
	<option value="3" >150</option>
	<option value="3" >180</option>
	<option value="4" >210</option>
	<option value="4" >240</option>
	<option value="5" >270</option>
	<option value="5" >300</option>
</select>
<input type='text' id='rez' />

laimas

26.07.2017 18:29

j0hnik,
а если уже выбиралось ранее? Наверное multiple все-таки и очищать приемник перед заполнением?

j0hnik

26.07.2017 18:37

Цитата:

Сообщение от laimas (Сообщение 459770)

j0hnik,
а если уже выбиралось ранее? Наверное multiple все-таки и очищать приемник перед заполнением?

можно и так, а можно и кнопку добавить, решений может быть много.

zoOmer

26.07.2017 19:08

j0hnik, Спасибо)
Вот только вопрос как сделать чтоб когда выбираешь к примеру вставляется 150,180, и вот тут последняя запятая лишняя тобишь надо чтоб было 150,180

laimas

26.07.2017 19:19

Цитата:

Сообщение от j0hnik

решений может быть много

Да, но ваше решение не предполагает уникальности, то есть вероятность выбора одного и того же велика.

рони	26.07.2017 19:56

<select name="sitetime" id="sitetime" onchange="document.getElementById('rez').value = [].map.call(selectedOptions,el=>el.text)" multiple="multiple" size="7">
  <option value="" ></option>
  <option value="1" >60</option>
  <option value="2" >90</option>
  <option value="2" >120</option>
  <option value="3" >150</option>
  <option value="3" >180</option>
  <option value="4" >210</option>
  <option value="4" >240</option>
  <option value="5" >270</option>
  <option value="5" >300</option>
</select>
<input type='text' id='rez' />

laimas

26.07.2017 20:03

Цитата:

Сообщение от рони

el=>el.text

Мода на форуме новая что-ли. :)
Ну возьмет отрок код этот, а он вряд ли знает, что это не везде будет работать.

рони	26.07.2017 20:18

laimas,
:)

<select name="sitetime" id="sitetime" onchange="document.getElementById('rez').value = [].reduce.call(options,function(a,b) {
 b.selected && a.push(b.text);
 return a
},[])" multiple="multiple" size="7">
  <option value="" ></option>
  <option value="1" >60</option>
  <option value="2" >90</option>
  <option value="2" >120</option>
  <option value="3" >150</option>
  <option value="3" >180</option>
  <option value="4" >210</option>
  <option value="4" >240</option>
  <option value="5" >270</option>
  <option value="5" >300</option>
</select>
<input type='text' id='rez' />

laimas

26.07.2017 20:21

Вот, конечно не скажешь, что "старый добрый ..." на все 100, но все таки больше надежды. :D

рони	26.07.2017 20:21

document.getElementById("rez").value=[].map.call(selectedOptions,function(a){return a.text});

рони	26.07.2017 20:22

Цитата:

Сообщение от laimas

"старый добрый ..."

:write:

<script>
   function fn(sel)
   { var a = [],i = 0, b;
     for (; b = sel.options[i++];)  {if(b.selected) a.push(b.text)};
     document.getElementById('rez').value = a;
   }
</script>

<select name="sitetime" id="sitetime" onchange="fn(this)" multiple="multiple" size="7">
  <option value="" ></option>
  <option value="1" >60</option>
  <option value="2" >90</option>
  <option value="2" >120</option>
  <option value="3" >150</option>
  <option value="3" >180</option>
  <option value="4" >210</option>
  <option value="4" >240</option>
  <option value="5" >270</option>
  <option value="5" >300</option>
</select>
<input type='text' id='rez' />

laimas

26.07.2017 20:41

рони,
теперь отрок может быть уверен, что работать будет, даже в Блокноте. :)

zoOmer

26.07.2017 23:12

рони, Доброго времени, Ув. ронни спасибо за решение вы как всегда на высоте)))
Но тут назрел вопросец если мне понадобиться брать value как быть?

рони	26.07.2017 23:28

Цитата:

Сообщение от zoOmer

Но тут назрел вопросец если мне понадобиться брать value как быть?

...!!! без комментариев
заменить ~~text~~ на value в примерах выше

Alexodiy

28.11.2017 16:54

<select name="sitetime" id="sitetime" onchange="document.getElementById('rez').value+=value+','">
	<option value="" ></option>
	<option value="1" >60</option>
	<option value="2" >90</option>
	<option value="2" >120</option>
	<option value="3" >150</option>
	<option value="3" >180</option>
	<option value="4" >210</option>
	<option value="4" >240</option>
	<option value="5" >270</option>
	<option value="5" >300</option>
</select>
<input type='text' id='rez' />

Как правильно написать это в <script></script>

onchange="document.getElementById('rez').value+=va lue+','"

рони	28.11.2017 17:01

Alexodiy,
:-?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function() {
  var select = document.querySelector('[name="sitetime"]'),
  res = document.getElementById('rez');
  select.addEventListener('change', function() {
     res.value+=this.value+','
  });
});
</script>
</head>

<body>
<select name="sitetime" id="sitetime" >
  <option value="" ></option>
  <option value="1" >60</option>
  <option value="2" >90</option>
  <option value="2" >120</option>
  <option value="3" >150</option>
  <option value="3" >180</option>
  <option value="4" >210</option>
  <option value="4" >240</option>
  <option value="5" >270</option>
  <option value="5" >300</option>
</select>
<input type='text' id='rez' />


</body>
</html>

Alexodiy

28.11.2017 18:04

А можно ли сделать проверку <input type='text' id='rez' /> и если value совпадает то в селекте в опции выводим selected

рони	28.11.2017 18:09

Alexodiy,
не понимаю

Nexus

28.11.2017 20:22

Alexodiy, как-то так?

<!DOCTYPE html>
<!-- © рони https://javascript.ru/forum/events/50724-vyvesti-znacheniya-value-iz-select-v-input-3.html#post471442 -->
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function() {
	var select = document.querySelector('[name="sitetime"]'),
	res = document.getElementById('rez');
	select.addEventListener('change', function() {
		res.value+=this.value+','
	});
	res.addEventListener('input', function() {
		var v=(res.value.split(',').filter(function(v){
			return !!v.trim().length;
		}).pop()||'').trim();
		if([].some.call(select.options,function(opt){
			return opt.value==v;
		}))
			select.value=v;
	});
});
</script>
</head>

<body>
<select name="sitetime" id="sitetime" >
  <option value="" ></option>
  <option value="1" >60</option>
  <option value="2" >90</option>
  <option value="2" >120</option>
  <option value="3" >150</option>
  <option value="3" >180</option>
  <option value="4" >210</option>
  <option value="4" >240</option>
  <option value="5" >270</option>
  <option value="5" >300</option>
</select>
<input type='text' id='rez' />


</body>
</html>

рони	28.11.2017 21:53

Цитата:

Сообщение от Nexus

select.value=v;

:-?

Цитата:

Сообщение от Nexus

Nexus

29.11.2017 08:29

рони, я обратил на это внимание, однако какой из нескольких вариантов выбирать непонятно.

рони	29.11.2017 08:57

Цитата:

Сообщение от Nexus

однако какой из нескольких вариантов выбирать непонятно.

:yes:

Часовой пояс GMT +3, время: 03:36.