javascript - 有没有办法从 DOM 中获取选项的不同值？

Question

我正在尝试创建一种从下拉列表中添加不同文章并将其添加到底部表格的方法。我需要的结果与此类似(产品是一本书):数量 - 标题 - 单价 - 总价由于表单中选项的值是这样的:<%= 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 };

我需要结果类似于表格，每个“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 是表)。