Question

我有几个具有不同name属性值的select标签。我必须得到每个值并将其放入对象变量中。怎么做？我的代码：

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);

您也可以像使用其他答案示例一样使用vanilla JavaScript。

Answer 2

您可以使用forEach循环遍历选择输入并填写obj对象：

选择输入框并将其解包到数组中：
```
[...document.querySelectorAll('.value')]
```
选择子select元素：
```
menu.querySelector('select')
```

然后在obj中添加新的键/值对：

obj[element.getAttribute('name')] = element.value
                ↑                         ↑
               key                      value

所以完整的代码如下：

const obj = {}

document.querySelector('.button').addEventListener('click', (e) => {

  [...document.querySelectorAll('.value')].forEach(menu => {

    const element = menu.querySelector('select');

    obj[element.getAttribute('name')] = element.value

  })

  console.log(obj)

})

我已经设置了一个事件监听器来显示它的工作原理：

const obj = {}

document.querySelector('.button').addEventListener('click', (e) => {

  [...document.querySelectorAll('.value')].forEach(menu => {

    const element = menu.querySelector('select');

    obj[element.getAttribute('name')] = element.value

  })

  console.log(obj)

})

<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>

<button class="button">Give object</button>

Answer 3

你不需要jQuery来执行此操作，这将在页面加载时返回一个对象。你必须将它包装在一个函数中，并添加一个事件监听器，以便在选择值发生变化时返回一个对象，或者在表单提交时返回一个对象，如果这就是你想要完成的东西

const variantsTable = document.querySelector('.variants')
const variantsSelects = Array.from(variantsTable.querySelectorAll('select'))

const obj = {}

variantsSelects.forEach(item => {
    obj[item.name] = item.value
})

console.log(obj)

Answer 4

输出：

{"color":"1","size":"4","material":"7"}

你可以在这里试试：

const obj = {};

$('table.variants td.value select').each(function(index) {
  obj[$(this).attr("name")] = $(this).val();
});

$("#output").text(JSON.stringify(obj));

<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>
<pre id="output"></pre>

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

4 个答案: