document.querySelectorAll 使用 Chrome 控制台进行下拉选择

Question

我很难让 document.querySelectorAll 使用模式识别。我需要在页面上找到名称以 [1] 结尾的所有下拉菜单并将该值设置为选项 1，然后对所有以 [2] 结尾的下拉菜单执行相同操作并将该值设置为选项 2。

我已经尝试了各种版本来让它们仅在控制台中列出： document.querySelectorAll('select[name$=[1]]').forEach(function(node) {console.log(node.options[node.selectedIndex].value);});

但我想我被多余的方括号挂断了。我试过转义、删除、引用，但我只能让查询使用特定名称，而不是选项的结尾，或者只使用单词角色的开头选项，因为它没有方括号： document.querySelectorAll('select[name^="role"]').forEach(function(node) {console.log(node.options[node.selectedIndex].value);});

因此，对于实际更改值，这适用于特定条目： document.querySelector('select[name*="role[10][1]"]').value = "682"

但是尝试这样做以获取所有事件并没有任何影响： document.querySelector('select[name$="[1]"]').value = "682"

<table class="map-table user-sync">
    <tbody>
        <tr>
                <th>External Role</th>
                <th>Internal Role</th>
        </tr>
        <tr>
                <td>First Role</td>
                <td><select name="role[10][1]">
                    <option value="0" selected="selected">Do Not Sync</option>
                    <option value="683">Option 1</option>
                    <option value="682">Option 2</option>
                    <option value="680">Option 3</option>
                    <option value="681">Option 4</option>
                    </select>
                </td>
        </tr>
                            <tr>
                <td>Second Role</td>
                <td><select name="role[10][1]">
                    <option value="0" selected="selected">Do Not Sync</option>
                    <option value="683">Option 1</option>
                    <option value="682">Option 2</option>
                    <option value="680">Option 3</option>
                    <option value="681">Option 4</option>
                    </select>
                </td>
              </tr>
</tbody></table>

Answer 1

您需要使用document.querySelectorAll("yourSelectorHere") 获取所有匹配项并从那里更新每个匹配项。

在您的示例中，document.querySelector('select[name$="[1]"]').value = "682" 只会获取它找到的第一个匹配项，在这种情况下，只会更新第一次匹配项。

这是一个工作示例：

document.querySelectorAll('select[name$="[1]"]')
.forEach(element => {
  element.value = "683";
});

<table class="map-table user-sync">
  <tbody>
  <tr>
    <th>External Role</th>
    <th>Internal Role</th>
  </tr>
  <tr>
    <td>First Role</td>
    <td><select name="role[10][1]">
      <option value="0" selected="selected">Do Not Sync</option>
      <option value="683">Option 1</option>
      <option value="682">Option 2</option>
      <option value="680">Option 3</option>
      <option value="681">Option 4</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Second Role</td>
    <td><select name="role[10][1]">
      <option value="0" selected="selected">Do Not Sync</option>
      <option value="683">Option 1</option>
      <option value="682">Option 2</option>
      <option value="680">Option 3</option>
      <option value="681">Option 4</option>
    </select>
    </td>
  </tr>
  </tbody></table>