Как использовать JQuery для выбора скрытого значения поля формы, которое является частью массива скрытых значений поля формы?

Question

У меня проблемы с выбором скрытого значения поля формы, которое является частью массива скрытых значений поля формы с тем же именем. Вот как выглядит один элемент массива:

<input data-val="true" data-val-number="The field ProductId must be a number." data-val-required="The ProductId field is required." id="OrderItemViewModels_2__ProductId" name="OrderItemViewModels[2].ProductId" type="hidden" value="3" />

Я попытался выбрать его несколькими способами в JQuery, например:

$('#OrderItemViewModels[2].ProductId').val());

и ..

$('#OrderItemViewModels\\[2\\].ProductId').val());

Ни один из которых не работал. Я также попробовал несколько других способов. Итак, я попробовал некоторые из предложений, приведенных ниже, в надежде просто напечатать значения в предупреждении. Я попробовал это:

alert('valueDirect2=' + $('#OrderItemViewModels_2__ProductId')).val();
alert('valueDirect1=' + $('input[name="OrderItemViewModels[2].ProductId"]')).val();

Это приводит к печати valueDirect2 = [Object object] в обоих случаях. Зачем? Что здесь не так?

Я в растерянности относительно того, как получить эти значения. Любая помощь?

Answer 1

Вам нужно, чтобы это было динамически, т. Е. На лету изменить, какое поле input выбрано? Если это так, вам нужно добавить переменную в середине вашего селектора.

Если вы измените существующий код следующим образом, он будет работать:

$('#OrderItemViewModels_2__ProductId').val();

Два ваших примера не сработали, потому что вы форматируете строку селектора, как в атрибуте name, но префикс # указывает jQuery искать атрибут id.

Можно также выбрать элемент по имени, который будет выглядеть следующим образом:

$('input[name="OrderItemViewModels[2].ProductId"]').val();

В ваших alert примерах вы видите [Object object], потому что синтаксис $ в jQuery является ярлыком для вызова функции jQuery. То, что вы действительно делаете, это:

jQuery('input[name="OrderItemViewModels[2].ProductId"]').val();

Это просто старый вызов функции. S - это удобное сокращение. Вы вызываете функцию и передаете строку, которая является селектором, который оценивает jQuery.

Ваш селектор ничего не возвращал, потому что он был неправильно отформатирован, поэтому вы в конечном итоге напечатали .val() или значение самой функции jQuery. Это немного сбивает с толку, пока вы не разберетесь в том, как работает jQuery.

Чтобы сделать ваш селектор динамическим, просто соедините строки вокруг переменной, содержащей номер input, который вы хотите выбрать:

$('input[name="OrderItemViewModels[' + myVariable + '].ProductId"]').val();

Вот jsFiddle , который иллюстрирует оба варианта.

Answer 2

$('input[name="OrderItemViewModels['+ index +'].ProductId"]').val(); // index = 0,1,2...

ИЛИ

$('#OrderItemViewModels_'+ index +'__ProductId').val(); // index = 0,1,2...