Как связать Select с Input с помощью Jquery?

645

24 ноября 2016, 09:55

Здравствуйте. Вопрос такой. Есть кнопка и тег со своими . При нажатии на кнопку появляется новый . При выборе определенного справа select'a появляется определенный тип input'a, указанный в option. Получается список из селектoв и инпутов.

Теперь вопрос. Как сделать так чтобы при изменении старого выбранного селекта, менялся нужный инпут, который справа него? А то вместо этого инпут добавляется в самом верху.

    function addField() { 
      $('#props').prepend('<div id=\"fields\">\ 
          <select onchange=\"addchange()\" class=\"options\" name=\"Tovar[name]\" id=\"Tovar_name\">\ 
          <option selected=\"true\" disabled=\"disabled\">Выберите свойство</option>\ 
          <option data-type=0>Первое</option>\ 
          <option data-type=1>Второе</option>\ 
          <option data-type=2>Третье</option>\ 
          </select>\ 
 				</div>\ 
 				<div id=\"change\" ></div><br>'); 
    } 
 
    function addchange(){ 
      var orange = $('.options option:selected').attr('data-type'); 
      switch (orange){ 
        case "0": 
          $('#change').append('<input type=\"number\" name=\"browser\" value=\"0\" min=\"0\" step=\"1\">'); 
          break; 
        case "1": 
          $('#change').append('<input type=\"text\" name=\"browser\" >'); 
          break; 
        case "2": 
          $('#change').append('<input type=\"checkbox\" name=\"browser\" >'); 
          break; 
        default : 
         $('#change').append('<p>Нет типа свойства</p>'); 
          break; 
      } 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label class="required">Свойства</label> 
  <div id="props"> 
  </div> 
  <a href="#" onclick="addField()">Добавить поле</a>

Answer 1

append заменить на html, append добавляет в конец содержимого элемента, prepend добавляет в начало содержимого элемента, html заменяет содержимое элемента

    function addField() { 
      $('#props').prepend('<div id=\"fields\">\ 
          <select onchange=\"addchange()\" class=\"options\" name=\"Tovar[name]\" id=\"Tovar_name\">\ 
          <option selected=\"true\" disabled=\"disabled\">Выберите свойство</option>\ 
          <option data-type=0>Первое</option>\ 
          <option data-type=1>Второе</option>\ 
          <option data-type=2>Третье</option>\ 
          </select>\ 
 				</div>\ 
 				<div id=\"change\" ></div><br>'); 
    } 
 
    function addchange(){ 
      var orange = $('.options option:selected').attr('data-type'); 
      switch (orange){ 
        case "0": 
          $('#change').html('<input type=\"number\" name=\"browser\" value=\"0\" min=\"0\" step=\"1\">'); 
          break; 
        case "1": 
          $('#change').html('<input type=\"text\" name=\"browser\" >'); 
          break; 
        case "2": 
          $('#change').html('<input type=\"checkbox\" name=\"browser\" >'); 
          break; 
        default : 
         $('#change').html('<p>Нет типа свойства</p>'); 
          break; 
      } 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label class="required">Свойства</label> 
  <div id="props"> 
  </div> 
  <a href="#" onclick="addField()">Добавить поле</a>