how to get the id of each dropdown and textarea row

Not sure what is the right approach to tackle this

I want to control te textarea Reason based on what is selected in the dropdown list. As you can see below i have got to the stage where i can get the attribute id of each row of the DropDown list Status But i can't get the attr id of each textarea Reason

My final result should be if a user selects declined then the user but enter a reason and if deactivated must enter a date. Thanks in advance

<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!');
       }




      });
});

The attr function:

gets the attribute value for only the first element in the matched set

So this:

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

works because this is the <select> element so there is only one element. The <textarea> one:

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

Just grabs the id attribute of the first <textarea>. If you want all the <textarea> elements, use each:

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

You don't need to use attr to get an ID if you have a DOM object (this inside the each), you can just access the attribute directly.

If you only want the <textarea> that's in the same row as the <select> (as noted in the comments), then you can use closest to walk up the DOM a bit and then find to come back down:

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

And there are multiple <textarea> elements in the table row and you want them all, then combine both approaches:

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