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是表）。

有没有办法从DOM中获得选项的不同值？

1 个答案: