Есть ли способ получить из DOM различные значения опции?

Question

Я пытаюсь создать способ добавления различных статей из выпадающего списка и добавить его в таблицу внизу.В результате мне нужно что-то похожее на это (продукт представляет собой книгу): Количество - Название - Цена / единица - Общая цена Поскольку значение параметра в форме выглядит следующим образом: <%= book.title%> <%= book.price %> IНапример, я не могу взять цену и поместить ее в другой столбец.

Я пытался создать несколько значений для одного параметра, и, очевидно, он не работал.

Код формы

<label for="book">Livres:</label>
<select id="books-list">
  <option value=""></option>
  <% @books.each do |book| %>
    <option value="<%= book.title %> -- <%= book.price %> dt"><%= book.title %> | <%= book.author %> </option>
  <% end %>
</select>

Код Javascript:

const addBookToList = () => {
  const booksList = document.querySelector('#books-list');

  if (booksList) {
    booksList.addEventListener("click", () => {
      const book = booksList.value
      if (book != "")
        booksList.insertAdjacentHTML('afterend', `<br/>${book}`)
      });
    };
  }

export { addBookToList };

Мне нужен результат, похожий на таблицу с каждым элементом «book» в столбце:

Quantity - Title        - Price/unit - Total Price
01       - Book title 1 - 152€       - 152€

Спасибо за вашпомощь.

Answer 1

Это самое простое решение, у вас есть атрибут данных, который содержит двойные значения, разделенные точкой с запятой. Вы разделите это, и вы получите реальные данные. Вы также можете использовать JSON для этого (не уверен насчет " против " в атрибуте html).

document.querySelector('#books-list').addEventListener('change', function(e) {
  const option = e.target.selectedOptions[0];
  if (option) {
    const value = option.dataset.value;
    if (value) {
      console.log(value.split(';;'));
    }
  }
});

<select id="books-list">
  <option value=""></option>
  <option data-value="foo;;bar;;baz">foo bar baz</option>
  <option data-value="lorem;;ipsum;;dolor">lorem ipsum dolor</option>
</select>

Для вашего случая вы можете просто split(' -- '); получить значения, а затем создать строку таблицы (tr) с данными (если booksList является таблицей).