时间戳

首页 > 解决方案 > 有没有办法从 DOM 中获取选项的不同值？

javascript - 有没有办法从 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€

谢谢您的帮助。

标签： javascripthtmlruby-on-rails

解决方案

这是您拥有包含双分号分隔值的数据属性的最简单的解决方案。你拆分它，你会得到真实的数据。您也可以为此使用 JSON（不确定&quot;vs "in 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 是表）。

推荐阅读