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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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