如何在jQuery中选择特定的表单元素？

Question

我有两种这样的形式：

<form id='form1' name='form1'>
  <input name='name' id='name'>
  <input name='name2' id='name2'>
</form>

<form id='form2' name='form2'>
  <input name='name' id='name'>
  <input name='name2' id='name2'>
</form>

现在，我想在form2的name字段中插入文本。我正在使用following jQuery code，但它会填充form1的name字段。

$("#name").val('Hello World!');

那么，如何仅选择特定的表单元素？

Answer 1

两次具有相同的ID无效，这就是#name只找到第一个ID的原因。

您可以尝试：

$("#form2 input").val('Hello World!');

或者，
$("#form2 input[name=name]").val('Hello World!');

如果您停留在无效页面上，并且想要选择所有#name，则可以在ID上使用属性选择器：
$("input[id=name]").val('Hello World!');

Answer 2

尽管它是无效的html，但是您可以使用选择器上下文来限制选择器在您的情况下，它就像：

$("input[name='name']" , "#form2").val("Hello World! ");

http://api.jquery.com/jquery/#selector-context

Answer 3

我更喜欢＃form2的ID后代选择器，例如：

$("#form2 #name").val("Hello World!");

http://api.jquery.com/descendant-selector/

Answer 4

我知道问题是关于设置输入的，但以防万一，如果您想设置一个组合框，那么（我在网上搜索并没有发现任何东西，这个地方似乎是指导其他人的正确地方）

如果您的表单中设置了ID属性（例如frm1），您想要设置一个特定的特定组合框，但未设置ID，而是设置了名称属性（例如，区）；然后使用

$("#frm1 select[name='district'] option[value='NWFP']").attr('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <form id="frm1">
        <select name="district">
            <option value="" disabled="" selected="" hidden="">Area ...</option>
            <option value="NWFP">NWFP</option>
            <option value="FATA">FATA</option>
        </select>
    </form>

Answer 5

$("#name", '#form2').val("Hello World")