Как связать элемент select с полем input?

Question

[vladHD]

Всем привет, собственно вопрос- есть 3 селекта( со списком машин), и есть инпут( поле) где должно отображаться то, Что было выбрано в селекте. Собственно вопрос- как это реализовать с помощью джиквери ?

Answer 1

[Andrey Dyrkov]

ну можно так

<form action="#">
<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>  
<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>  
<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>  
  
  <input type="text" />
</form>

;(function(w,$){
  var selects =  $('form').find('select'),
      input   =  $('input');
  
  selects.bind('change',function(e){
    var string="";  
   for(var i =0,l=selects.length;i<l;i++){
     string+=selects[i].value+" ";
   }
    input.val(string);
  });
  
})(window,$);

Готовый результат codepen.io/anon/pen/YyRQzE

Comments

[vladHD]

в Вашем решении при выборе из селекта попадают в инпут значения всех 3-х, а как сделать что бы всегда попадало только одно значение ?

[Andrey Dyrkov]

vladHD: вот так

;(function(w,$){
var selects = $('form').find('select'),
input = $('input');

selects.bind('change',function(e){
input.val($(e.target).val());
});

})(window,$);

[vladHD]

т.е что бы в инпуте было всегда только одно текущее значение.

[vladHD]

а инпут можно вынести за пределы формы ?

[Andrey Dyrkov]

vladHD: вы вольны делать всё что угодно. Если вы уверены что у вас всё будет работать на js, то вы можете достать значение от куда угодно на странице, просто вам будет сложней искать этот input. Не зря придумали тег form, специально для всех елементов управления, чтобы всё было на своих местах)

Answer 2

[Владимир]

https://jsfiddle.net/9hm1Lm20/

Answer 3

[vladHD]

отлично, а как сделатЬ, чтобы только в инпут могло одно значение заноситься, а при выборе из другого селекта- оно перезаписывалось ?

Comments

[Maxim Nepritimov]

тебе уже и так много подсказали. Пошевели сам мозгами =)

[vladHD]

Maxim Nepritimov: какую смысловую нагрузку несет Ваш комментарий ? идите и пишите это где-то в другом месте.

[Maxim Nepritimov]

vladHD: Ну смысловая нагрузка такая - сам делать ничего не хочешь, точнее вникать в то, что нужно сделать. Уже же все подсказали. Просто оперируй полученными знаниями и все.