javascript - 如何将jquery中的数据分别放入对象变量中

Question

我有几个具有不同名称属性值的选择标签。我必须获取每个值并将其放入对象变量中。怎么做？我的代码:

var obj = {};

$('.variants tbody tr td.value').children('select').each(function(index, value) {
  alert($(this).attr('name'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variants">
  <tbody>
    <tr>
      <td>1</td>
      <td class="value">
        <select name="color">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td class="value">
        <select name="size">
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td class="value">
        <select name="material">
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

在这里，我必须得到

{"color":"selected_option_value", "size":"selected_option_value", "material":"selected_option_value"}

Answer 1

您应该选择表中的所有 select 元素(您不需要如此复杂的 jQuery 查询来实现此目的)，迭代集合；然后，对于集合中的每个元素，获取其名称(使用 attr() 函数)和选定的值(使用 val() 函数)，并在输出上创建一个属性对象 (obj) 使用 select 的名称并将其值分配给 select 值。

// define the container object
var obj = {};

// for each select in the table
$('.variants select').each(function(index, select) {

    // set the current item as a jQuery object
    var current = $(select);

    // sets the object key using the name of the select and the current selected value as the object key value
    obj[current.attr('name')] = current.val();

});

// output
console.log(obj);

您也可以使用普通 JavaScript 执行与其他答案示例中相同的操作。