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

72

我有两种这样的形式：

<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的名称字段中插入文本。我正在使用以下jQuery代码，但它填充了form1的名称字段。

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

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

jquery jquery-selectors

— 阿万
source

137

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

你可以试试：

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

要么，

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

如果您停留在无效页面上并想要选择all #name，则可以在id上使用属性选择器：

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

— 科比
source

+1谢谢。还有一件事，如果我想使用多个选择器选择特定表单的两个字段，该怎么办。

— 阿万（Awan）2010年

4

$( '#formId field1Id, #formId field2Id' )

— charliegriefer 2010年

3

@Awan-另一个选项适用$('#form2 input')于所有输入字段，或$('#form2 input').filter('[name=name1], [name=name2]')

— Kobi 2010年

@ charliegriefer，@ Kobi：谢谢

— Awan 2010年

@charliegriefer-当然，您需要#field1Id和#field2Id，但我不确定使用重复的ID会如何表现。

— 科比

8

虽然它是无效的html，但是您可以使用选择器上下文来限制选择器，例如：

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

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

— 塔夫科夫
source

3

值得注意的$('input[name=name]','#form2').val('Hello World!');是，jQuery在内部将其翻译为$('#form2').find('input[name=name]').val('Hello World!')（有关详细信息，请参见jQuery API。）

— David说，请恢复Monica 2010年

您忘记了名称部分的引号-没有引号，我会收到语法错误

— Piotr Kula

6

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

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

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

— 马科斯·塞德雷斯（Marcos Sedrez）
source

2

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

如果您有一个具有ID属性集的表单（例如frm1），并且您想要设置一个特定的特定组合框，而没有ID集，但名称属性集（例如District）；然后使用

$("#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>

展开摘要

— 阿黛尔·拉扎·阿泽米（Adeel Raza Azeemi）
source

-2

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

— bbbbb
source