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

【问题标题】：Is there a way to get from the DOM the different values of an option?有没有办法从 DOM 中获取选项的不同值？
【发布时间】：2019-04-10 12:03:51
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

创建一个包含所有书籍的数组并给它们一个 id。然后将该 id 作为选项值。这样，您可以根据需要向您的图书添加任意数量的属性，而无需更改 HTML 或将有关图书的所有内容塞进 HTML 属性中。如果可以避免，请不要使用 HTML 作为数据模型。然后创建表就像：1）过滤书籍数组以找到正确的书籍。 2) 遍历所有书籍属性以创建表格单元格。
几种方法是使用 data- 属性或使用 JSON 将数据的数组/哈希图传递给 javascript 变量，并使用选定的值来搜索该数据

标签： javascript html ruby-on-rails

【解决方案1】：

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

【讨论】：