【问题标题】:querySelectorAll doesn't select select boxes with namequerySelectorAll 不选择带有名称的选择框
【发布时间】:2017-01-24 15:29:57
【问题描述】:

我有一个包含多个选择框和输入的表单,其中包含一个类似名称的数组。 所以我有多个名为 personroom[] 的选择框。我想用这个得到这些

 var personroom=document.querySelectorAll("input[name='personsroom[]']");

            alert(personroom.length)

它给了我空值(“0”)。但以同样的方式,我可以选择所有输入(文本)字段。奇怪的。谁能帮帮我?

【问题讨论】:

标签: javascript


【解决方案1】:

问题似乎与选择器的确切目标有关。 原始选择器 "input[name='personsroom[]']" 不起作用,但根据 OP cmets 删除 input 起作用 "[name='personsroom[]']"

关于转义[] 字符的说明。在这种特定情况下,这不是问题,因为查询字符串使用了内联单引号 ► "[name='personsroom[]']"

使用这个"input[name=personsroom[]]",没有单引号,你需要像这样"input[name=personsroom\\[\\]]"转义[]

// The below will fail with "Uncaught SyntaxError..." during execution
//var personroom = document.querySelectorAll("[name=personsroom[]]");

//The below works as we are escaping the special characters
var personroom = document.querySelectorAll("[name=personsroom\\[\\]]");
console.log("1.) personroom.length", personroom.length);

//Also, when using inline quotes, you do not need to escape any characters
var personroom = document.querySelectorAll("[name='personsroom[]']");
console.log("2.) personroom.length", personroom.length);
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />
<input type='textbox' name='personsroom[]' />

【讨论】:

  • 我做到了。没有结果
  • @AzerQurbanov 刚刚用代码示例更新了它。如果您有不同的标记,可以将其添加到您的问题中吗?也许与此有关?
  • @AzerQurbanov 使用选择标签它的工作原理是一样的。只需将input 替换为select 或仅document.querySelectorAll("[name='selectpersonsroom\[\]']") 而不需要标记即可。
  • 您能否指出一个参考资料来解释为什么在这种情况下需要使用反斜杠?我已经在没有反斜杠的情况下运行了你的 sn-p,它的工作方式完全相同。
  • 我这样做了 document.querySelectorAll("[name='personsroom[]']");
【解决方案2】:

如果您使用选择框,那么您使用的是&lt;select&gt;&lt;/select&gt;,对吗?在查询中将 input 更改为 select:

var personroom=document.querySelectorAll("select[name='personsroom[]']");

        alert(personroom.length)

【讨论】:

  • 不,这是选择。但我有其他输入标签。它工作正常
猜你喜欢
  • 2014-09-14
  • 1970-01-01
  • 2011-01-21
  • 2019-09-06
  • 2014-04-12
  • 1970-01-01
  • 2011-12-13
  • 2011-07-06
  • 2014-05-18
相关资源
最近更新 更多