как получить идентификатор каждого выпадающего и строки textarea

Question

Не уверен, каков правильный подход к решению этой проблемы

Я хочу контролировать текстовую причину, основываясь на том, что выбрано в раскрывающемся списке.Как вы можете видеть ниже, я попал на стадию, где я могу получить идентификатор атрибута каждой строки списка DropDown. Статус. Но я не могу получить идентификатор атрибута каждой текстовой области. Причина

Мой окончательный результат должен бытьесли пользователь выбирает отклонено, то пользователь должен указать причину, а при деактивации - ввести дату.Заранее спасибо

<tr>
<td class="ms-vb"><span dir="none">
<select class="ms-RadioText" title="Status" id="WebPartManager_g_31f0d9e1_72a0_4ef2_b286_7c30cd0fda1f_ff5_3_ctl00_DropDownChoice" name="WebPartManager$g_31f0d9e1_72a0_4ef2_b286_7c30cd0fda1f$ff5_3$ctl00$DropDownChoice">
<option value="Provisionally Approved" selected="selected">Provisionally Approved
</option>
<option value="Approved">Approved</option>
<option value="Declined">Declined</option>
<option value="Deactivated">Deactivated</option>
</select><br>
</span></td>
<td class="ms-vb">
<span dir="none">
<textarea dir="none" class="ms-long" title="Reason" id="WebPartManager_g_31f0d9e1_72a0_4ef2_b286_7c30cd0fda1f_ff11_3_ctl00_ctl00_TextField" cols="20" rows="6" name="WebPartManager$g_31f0d9e1_72a0_4ef2_b286_7c30cd0fda1f$ff11_3$ctl00$ctl00$TextField" style="display: none;">Test3</textarea><br>
</span></td>

</tr>
$(document).ready(function(){

 $("textarea").hide(); 
 $("input[title$='DeActivatedDate']").hide(); 


 $("tr select[title='Status']").change(function () {




        var selectedValue = $(this).find("option:selected").text();


        if (selectedValue == 'Declined')
        {


       alert('You need to type in a Reason if STATUS is DECLINED!');


        //i'm getting the id of each dropdown row here
        var select_id = $(this).attr('id');  
        var b = $("#" + select_id).text();
        alert(select_id);
        //i can get the id of each Dropdown  of each row


         //i'm getting the id of each textarea row here
        var textarea_id = $("tr td textarea").attr('id'); 
        var c = $("#" + textarea_id).text();
        alert(textarea_id);

        //i'm only getting the attr id of the first textarea but not the other



       }

        if (selectedValue == 'Deactivated')
        {

        alert('You need to select a De-Activated Date if STATUS IS DEACTIVATED!');
       }




      });
});

Answer 1

Функция attr :

получает значение атрибута только для первого элемента в соответствующем наборе

Итак, это:

var select_id = $(this).attr('id');

работает, потому что this является элементом <select>, поэтому существует только один элемент. <textarea> один:

var textarea_id = $("tr td textarea").attr('id');

Просто захватывает атрибут id первого <textarea>. Если вам нужны все элементы <textarea>, используйте each:

$("tr td textarea").each(function() {
    var textarea_id = this.id;
    var content     = $(this).text();
    alert(textarea_id);
});

Вам не нужно использовать attr для получения идентификатора, если у вас есть объект DOM (this внутри each), вы можете просто получить доступ к атрибуту напрямую.

Если вы хотите, чтобы <textarea> находился в той же строке, что и <select> (как отмечено в комментариях), вы можете использовать closest, чтобы немного подняться по DOM и затем find, чтобы вернуться обратно:

var textarea_id = $(this).closest('tr').find('textarea').attr('id');

И в строке таблицы есть несколько элементов <textarea>, и вы хотите их все, затем объедините оба подхода:

$(this).closest('tr').find('textarea').each(function() {
    // ...
});