0

Есть такая форма skrinshoter.ru/s/240516/pp5TvW?a (слева раздел, справа элемент)

вот примерная разметка селекторов:

<div class="row">
  <div class="col-md-4">

    <p class="select-head-p">1.Выберите категорию продукции</p>
    <select>
      <option>Микрокальцит</option>
      <option>Мраморная крошка,песок</option>
      <option>Щебень</option>
      <option>Минеральный порошок</option>
      <option>Каолин</option>
      <option>Химические реагенты</option>
    </select>

  </div>
  <div class="col-md-4">

    <p class="select-head-p">2.Выберите фракцию/товар</p>

    <div class="dynamic-form">
    </div>
    <select>
      <option>Микрокальцит стандарт, фракция 2мкм.</option>
      <option>Микрокальцит стандарт, фракция 3мкм</option>
      <option>Микрокальцит стандарт, фракция 60мкм</option>
      <option>Микрокальцит стандарт, фракция 80мкм</option>
      <option>Микрокальцит стандарт, фракция 150мкм</option>
      <option>Микрокальцит стандарт, фракция 120мкм</option>
      <option>Микрокальцит стандарт, фракция 10мкм</option>
      <option>Микрокальцит стандарт, фракция 50мкм</option>
      <option>Микрокальцит стандарт, фракция 3мкм</option>
    </select>


  </div>

Как мне добавить по клику , например на "+" , точно такую же разметку ниже? т.е чтобы было несколько строк с селектроами,? также надо иметь удалять эту строку(если нажата случайно)

  <script>
                         $(".wrap_send_zay").on("click", ".add__content", function(event){
                $(".select-dublicate_dynamic").clone(true).insertBefore(event.target)
            });


            $(".wrap_send_zay").on("click", ".delete__content", function(event){
                if($(".wrap_send_zay .select-dublicate_dynamic").length > 1){
                    $(event.target).closest(".row").detach();
                }
            });
    </script> 

это чуть модернизировал скрипт

1 ответ 1

2

Насколько я понял на сайте используется Bootstrap, почему бы не использовать и JQuery? Учитывайте, что если метки JQuery нет, то ответы не предполагают его содержание на сайте. В общем случае используйте специальные функции для клонирования, добавления и удаления как в нативном JS, так и в JQuery

Нативный JavaScript

document.querySelector(".tb").addEventListener("click", function(e){
    if(e.target.nodeName == "BUTTON" && e.target.className.indexOf("add") > -1){
        newRow = document.querySelector(".row").cloneNode(true);
        this.insertBefore(newRow, e.target)
    }
    
    if(e.target.nodeName == "BUTTON" && e.target.className.indexOf("del") > -1 && document.querySelectorAll(".row").length > 1){
        delRow = e.target.parentNode
        this.removeChild(delRow)
    }
})
<div class="tb">
  <div class="row">
    <div class="col-md-4">

      <p class="select-head-p">1.Выберите категорию продукции</p>
      <select>
        <option>Микрокальцит</option>
        <option>Мраморная крошка,песок</option>
        <option>Щебень</option>
        <option>Минеральный порошок</option>
        <option>Каолин</option>
        <option>Химические реагенты</option>
      </select>

    </div>
    <div class="col-md-4">

      <p class="select-head-p">2.Выберите фракцию/товар</p>

      <div class="dynamic-form">
      </div>
      <select>
        <option>Микрокальцит стандарт, фракция 2мкм.</option>
        <option>Микрокальцит стандарт, фракция 3мкм</option>
        <option>Микрокальцит стандарт, фракция 60мкм</option>
        <option>Микрокальцит стандарт, фракция 80мкм</option>
        <option>Микрокальцит стандарт, фракция 150мкм</option>
        <option>Микрокальцит стандарт, фракция 120мкм</option>
        <option>Микрокальцит стандарт, фракция 10мкм</option>
        <option>Микрокальцит стандарт, фракция 50мкм</option>
        <option>Микрокальцит стандарт, фракция 3мкм</option>
      </select>
    </div>
    <button class="del">удалить</button>
  </div>
  <button class="add">добавить</button>
</div>

Библиотека JQuery

$(".tb").on("click", ".add", function(event){
    $(".row").clone(true).insertBefore(event.target)
});

$(".tb").on("click", ".del", function(event){
    if($(".tb .row").length > 1){
        $(event.target).closest(".row").detach();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tb">
  <div class="row">
    <div class="col-md-4">

      <p class="select-head-p">1.Выберите категорию продукции</p>
      <select>
        <option>Микрокальцит</option>
        <option>Мраморная крошка,песок</option>
        <option>Щебень</option>
        <option>Минеральный порошок</option>
        <option>Каолин</option>
        <option>Химические реагенты</option>
      </select>

    </div>
    <div class="col-md-4">

      <p class="select-head-p">2.Выберите фракцию/товар</p>

      <div class="dynamic-form">
      </div>
      <select>
        <option>Микрокальцит стандарт, фракция 2мкм.</option>
        <option>Микрокальцит стандарт, фракция 3мкм</option>
        <option>Микрокальцит стандарт, фракция 60мкм</option>
        <option>Микрокальцит стандарт, фракция 80мкм</option>
        <option>Микрокальцит стандарт, фракция 150мкм</option>
        <option>Микрокальцит стандарт, фракция 120мкм</option>
        <option>Микрокальцит стандарт, фракция 10мкм</option>
        <option>Микрокальцит стандарт, фракция 50мкм</option>
        <option>Микрокальцит стандарт, фракция 3мкм</option>
      </select>
    </div>
    <button class="del">удалить</button>
  </div>
  <button class="add">добавить</button>
</div>

4
  • Большое спасибо @Alex Krass, я немного модернизировал код и у меня возникли проблемы alfa.maxkondaurov.ru вот тут можно найти форму skrinshoter.ru/s/260516/3hKv1j?a , скрипт я почти не менял , проблема в том что есл несколько раз нажимать ++ , то клонируется сначала 2 селектора, потом 4 и т.д, а надо каждый раз добавлять по 2 26 мая 2016 в 10:56
  • 1
    @ЕгорТрегубенко, я бы вам советовал изменить разметку формы, в противном случае придется много извращаться. Сделать главный row как col-md-8(для пункт 1 и 2) + col-md-4(пункт 3 для контактов). Внутри первой колонки col-md-8 сделать еще row в котором два col-md-6. В этом случае Вы сможете уже реализовать нормальное копирование и форма не потеряет свой вид.
    – Alex Krass
    26 мая 2016 в 11:42
  • @ Alex Krass а как мне допустим избавиться тогда от <p class="select-head-p">2.Выберите фракцию/товар</p> ,если я хочу чтоб только селекты добавлялись? 26 мая 2016 в 11:51
  • @ЕгорТрегубенко, разнесите их по отдельным row. И да, там наверное копировался массив и надо было добавить перед clone(true) вызов eq(0). Я подправил разметку, что бы разделить <p> и <select> и код, так же добавил для скрипта классы, что бы не путаться, посмотрите: jsfiddle.net/jLj6k5vy
    – Alex Krass
    26 мая 2016 в 12:35

Ваш ответ

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

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