Селектор по нескольким атрибутам
 

Прошу помочь разобраться в селекторах. Имеется страница, возвращённая с сервера, в которой есть 10, 20, 30... одинаковых блоков. В двух словах - php, foreach, include...

<form action="tempOffStatus" method="post">
            <input type="hidden" name="row" value="<?=$item_r['id'];?>">
            <select id="tempOffChangeStatus" rel="<?=$item_r['id'];?>">
                <option value="0" <? if($item_r['tempOff'] == 0): ?> selected <?endif;?>> есть в наличии </option>
                <option value="1" <? if($item_r['tempOff'] == 1): ?> selected <?endif;?>> нет в наличии </option>
            </select>
        </form>

Все блоки одинаковые, но параметр rel=<?=$item_r['id'];?> в каждом блоке уникальный.

Нужно select-ом менять значения в каждом конкретном блоке.

<script>
    $(document).ready(function(){
        $("#tempOffChangeStatus").change(function(){

            var rel = $(this).attr("rel");
            var offStatus = $("#tempOffChangeStatus + rel :selected").val();

Т.е. переменная offStatus должна относиться к одному блоку, а не ко всем сразу. Я так понимаю, что селектор в JS должен быть составным. Из двух частей. Где то я с синтаксисом намудрил, что ли.
Может кто-нибудь помочь в грамотном оформлении, а то с JS я не очень ...

ЗЫ. То, что в моём примере здесь, это у меня уже крыша поехала, тыкал всё подряд...

То есть задача при выборе в списке занести его значение в скрытое поле? Если да, то нафига оно вообще нужно это поле?

Атрибут id замените на атрибут class...

<form action="tempOffStatus" method="post">
            <input type="hidden" name="row" value="<?=$item_r['id'];?>">
            <select class="tempOffChangeStatus" rel="<?=$item_r['id'];?>">
                <option value="0" <? if($item_r['tempOff'] == 0): ?> selected <?endif;?>> есть в наличии </option>
                <option value="1" <? if($item_r['tempOff'] == 1): ?> selected <?endif;?>> нет в наличии </option>
            </select>
        </form>

В скрипте соответственно #tempOffChangeStatus замените на .tempOffChangeStatus

<script>
    $(document).ready(function(){
        $(".tempOffChangeStatus").change(function() {

            var rel = $(this).attr("rel");
            var offStatus = $(this).val();

Я правильно думаю, что вы значение переменной offStatus не собираетесь записывать в то скрытое поле?

Если речь об input-е, то оно лишнее. Оно не нужно, я его уберу. В JS будет ajax запрос в php модель. И дальше обновление в базу данных. Там уже всё настроено и работает.

Теперь всё работает! Спасибо большое!!!!!

Ещё вопрос в догонку. Как взять результаты только первой инерации средствами JS? Ибо в теле страницы у меня столько блоков, сколько записей в БД. И перебор массива возвращается из php.

Такого не существует, вы наверное имели в виду, например, POST запрос... https://developer.mozilla.org/ru/docs/Web/HTTP/Methods

Вы имеете в виду первый попавший .tempOffChangeStatus? Можно так...

$(".tempOffChangeStatus").first()

Да. Именно POST запрос. Там всё в порядке.

Вы имели ввиду так:

$(document).ready(function(){
$(".tempOffChangeStatus").first().change(function( ){

var rel = $(this).attr("rel");
var offStatus = $(this).val();

В таком виде ничего не происходит.

Да, если вам нужно именно первое .tempOffChangeStatus и чтобы на нём был обработчик события...

В таком виде почему то не работает...