Как выбрать конкретный элемент формы в 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 . Я использую следующий код jQuery , но он заполняет имя поле form1 .

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

Так как же выбрать только определенные элементы формы?

Answer 1

Недопустимо иметь один и тот же идентификатор дважды, поэтому #name находит только первый.

Вы можете попробовать:

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

Или

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

Если вы застряли на неверной странице и хотите выбрать все #name s, вы можете использовать селектор атрибута для идентификатора:

$("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, например:

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

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

Answer 4

Я знаю, что вопрос заключается в настройке входа, но на всякий случай, если вы хотите установить комбинированный список (я ищу в сети и ничего не нашел, и это место кажется подходящим для других)

Если у вас была форма с установленным атрибутом ID (например, frm1), и вы хотели установить конкретный конкретный комбинированный список, без указания идентификатора, но с установленным атрибутом имени (например, район);затем используйте

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