1

Здравствуйте. Вопрос такой. Есть кнопка и тег со своими . При нажатии на кнопку появляется новый . При выборе определенного справа 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>

1 ответ 1

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>

1
  • Спасибо, но все равно проблема в том, что он нормально меняет только последний элемент, то есть самый верхний, а те которые ниже - никак не изменяет. Commented 16 нояб. 2016 в 18:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.