Есть ли способ получить из DOM разные значения параметра?
Я пытаюсь создать способ добавления разных статей из раскрывающегося списка и добавления его в таблицу внизу. Результат, который мне нужен, похож на этот (продукт - книга):
Количество - Название - Цена/единица - Общая цена
Так как значение опции в форме такое: <%= book.title%> <%= book.price %> Я не могу взять цену саму по себе и поставить в другой столбец например.
Я пытался создать несколько значений для одного параметра, и, очевидно, это не сработало.
Код формы
<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 };
Мне нужно, чтобы результат был чем-то вроде таблицы с каждым элементом «книга» в столбце:
Quantity - Title - Price/unit - Total Price
01 - Book title 1 - 152€ - 152€
Спасибо за помощь.
несколько подходов используют атрибуты data- или передают массив/хэш-карту данных в переменную javascript с помощью JSON и используют выбранное значение для поиска этих данных.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(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 является таблицей).
Создайте массив, содержащий все книги, и присвойте им идентификатор. Затем поместите этот идентификатор в качестве значения параметра. Таким образом, вы можете добавлять столько свойств к своим книгам, сколько хотите, без необходимости изменять HTML или втискивать все о книге в атрибуты HTML. Не используйте HTML в качестве модели данных, если этого можно избежать. Затем создать таблицу так же просто, как: 1) отфильтровать массив книг, чтобы найти нужную книгу. 2) переберите все свойства книги, чтобы создать ячейку таблицы.