Как я могу создать динамические c выбранные поля с jquery?

Question

Я пытаюсь создать небольшую форму с несколькими полями выбора. Моя цель - позволить пользователю выбрать несколько параметров из первого поля множественного выбора. Затем я отображаю его выбор перед каждым результатом с новым полем выбора. Это работает нормально.

Однако я не знаю, как собрать вместе первый и второй выбор пользователя, нажав на вторую кнопку (#confirmation)

jQuery(document).ready(function($) {
  $("#yourChoice").on('click', function() {
    $("#multiple option:selected").each(function() {
      var html = '';
      html += '<p><span class="yourchoice">' + $(this).text() + '</span>';
      html += '<select id="quantity" name="quantity">';
      html += ' <option value="10">10</option> ';
      html += ' <option value="20">20</option> ';
      html += ' <option value="30">30</option> ';
      html += '</select></p>';
      $('#choice').append(html);
    })
  })

  $("#confirmation").on('click', function() {
    var group = $("#multiple option:selected").each();
    $("#quantity option:selected").each(function() {
      var finalText = '';
      finalText += '<span>' + $("#multiple option:selected").each().text() + '</span>';
      finalText += '<span class="yourchoice">' + $(this).val() + '</span>';
      $('#finalChoice').append(finalText);
    })
  })
})

.chosen-select {
  width: 300px;
}

#quantity {
  width: 300px;
  margin-left: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <select id="multiple" name="multiple" multiple="multiple" class="chosen-select">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value4">Value 4</option>
    <option value="value5">Value 5</option>
    <option value="value6">Value 6</option>
  </select>
</p>

<button id="yourChoice">Add your choices</button>
<p>Choose a quantity</p>
<div id="choice"></div>

<button id="confirmation">Resume</button>
<div id="finalChoice"></div>

Answer 1

Сначала нужно решить несколько проблем, таких как повторяющиеся атрибуты id, которые являются недопустимыми, поскольку id должен быть уникальным в DOM и должен быть заменен классом. Кроме того, вы вызываете each() без обработчика в нескольких местах, что является причиной ошибки, которую вы видите.

Чтобы сделать эту работу, я бы предложил вам построить HTML в циклах с помощью выбранных опций , Рекомендуется максимально разделить ваши HTML и JS, чтобы добиться того, чтобы в DOM можно было хранить структуры шаблона HTML, которые будут скрыты до клонирования, заполнены соответствующими данными и затем добавлены в правильные места. Попробуйте это:

jQuery(document).ready(function($) {
  $("#yourChoice").on('click', function() {
    $("#multiple option:selected").each(function() {
      let $clone = $('.choice:last').clone().appendTo('#choice')
      $clone.find('.yourchoice').text(this.value);
    });
  });

  $("#confirmation").on('click', function() {
    let $finalChoice = $('#finalChoice').empty();
    let finalChoices = $('#choice .choice').map(function() {
      let $choice = $(this);
      let $clone = $('.finalChoice:last').clone();
      $clone.find('.text').text($choice.find('.yourchoice').text());
      $clone.find('.quantity').text($choice.find('.quantity').val());
      return $clone;
    }).get();
    $finalChoice.append(finalChoices);
  })
})

.chosen-select {
  width: 300px;
}

#quantity {
  width: 300px;
  margin-left: 20px
}

.choice,
.finalChoice {
  display: none;
}

#choice .choice,
#finalChoice .finalChoice {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <select id="multiple" name="multiple" multiple="multiple" class="chosen-select">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value4">Value 4</option>
    <option value="value5">Value 5</option>
    <option value="value6">Value 6</option>
  </select>
</p>

<button id="yourChoice">Add your choices</button>
<p>Choose a quantity</p>
<div id="choice"></div>


<button id="confirmation">Resume</button>
<div id="finalChoice"></div>

<!-- templates -->
<p class="choice">
  <span class="yourchoice"></span>
  <select class="quantity" name="quantity">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
</p>
<div class="finalChoice">
  <span class="text"></span>
  <span class="quantity"></span>
</div>

Answer 2

Что ж, благодаря @Rory мне удалось ограничить выбор пользователя в первом поле множественного выбора. Я добавляю одну строку, не уверен, что это лучший способ, но он работает!

jQuery(document).ready(function($) {
  $("#yourChoice").on('click', function() {
     $('#choice').empty();
    $("#multiple option:selected").each(function() {
      let $clone = $('.choice:last').clone().appendTo('#choice')
      $clone.find('.yourchoice').text(this.value);
    });
  });

  $("#confirmation").on('click', function() {
    let $finalChoice = $('#finalChoice').empty();
    let finalChoices = $('#choice .choice').map(function() {
      let $choice = $(this);
      let $clone = $('.finalChoice:last').clone();
      $clone.find('.text').text($choice.find('.yourchoice').text());
      $clone.find('.quantity').text($choice.find('.quantity').val());
      return $clone;
    }).get();
    $finalChoice.append(finalChoices);
  })
})

.chosen-select {
  width: 300px;
}

#quantity {
  width: 300px;
  margin-left: 20px
}

.choice,
.finalChoice {
  display: none;
}

#choice .choice,
#finalChoice .finalChoice {
  display: block;
}
.finalChoice{
  margin:20px auto;
}
button{
  background-color:#FF7F50;
  border:1px solid #757575;
  padding:10px 20px;
  color: #fff;
  text-transform:uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <select id="multiple" name="multiple" multiple="multiple" class="chosen-select">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
    <option value="value4">Value 4</option>
    <option value="value5">Value 5</option>
    <option value="value6">Value 6</option>
  </select>
</p>

<button id="yourChoice">Add your choices</button>
<p>Choose a quantity</p>
<div id="choice"></div>


<button id="confirmation">Resume</button>
<div id="finalChoice"></div>

<!-- templates -->
<p class="choice">
  <span class="yourchoice"></span>
  <select class="quantity" name="quantity">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
</p>
<div class="finalChoice">
 You asked <span class="quantity"></span> pieces
  of <span class="text"></span>
</div>