Заполните параметры выбора, используя jQuery и значения атрибутов данных

Question

Я хотел бы добавить даты из списка HTML в форму.

Чтобы не менять действительные формы все время, я бы хотел получать даты из текста. Скажем, у меня есть список с датами, если пользователь нажимает кнопку, которая открывает форму, я хочу получить <select> в форме с датами. (Я не собираюсь делать каждую дату кликабельной и открывать форму с выбранной датой)

Так, например, мой клиент редактирует текст страницы и добавляет даты в текст веб-страницы в виде списка this:

<ul id="course1">
 <li>Date 1</li>
 <li>Date 2</li>
 <li>Date 3</li>
</ul>

В тексте есть кнопка, которая открывает модальное окно с формой, все, что я хочу, это заполнить <select> в этой форме датами из этого списка.

Мне удалось заставить его работать с обычным текстовым значением, например так:

HTML:

<a class="programma-kiezer" data-prog="Forming Fase" href="#" data-toggle="modal" data-target="onderwijs">button</a>

И тогда он просто принимает значение "data-prog" и помещает его в форму

jQuery:

jQuery(window).on("load", function () {

   jQuery('.programma-kiezer').on('click', function(e) {
       e.preventDefault();

       jQuery('input[name="programma"]').val( jQuery(this).data('prog'));
   });
});

Но как мне добавить значения опций из списка дат и добавить их в форму?

Большое спасибо заранее!

Answer 1

Вы можете взять <li> s 'тексты и создать <option> s для каждого из них.

Что-то вроде:

$('#onderwijs').on('shown.bs.modal', function() {
  const dates = $('#course1 li').map((i, li) => $(li).text()).get();
  // dates = ['2020-12-05', '2019-09-05', '2028-05-04']
  let html = dates.map(date => {
    return `<option>${date}</option>`;
  }).join('');
  // html = <option>2020-12-05</option><option>2019-09-05</option><option>2028-05-04</option>
  
  $('#dates').html(html);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a class="programma-kiezer" data-prog="Forming Fase" href="#" data-toggle="modal" data-target="#onderwijs">button</a>

<ul id="course1">
 <li>2020-12-05</li>
 <li>2019-09-05</li>
 <li>2028-05-04</li>
</ul>

<div class="modal" id="onderwijs" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <select id="dates"></select>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

---

Подробнее о

• jQuery map (get is возвращает собственный массив javascript).
• javascript map
• join
• jQuery html

Дайте мне знать, если что-то не понятно.