Unable to access selectOptions values with javascript or jquery after rerender of Visualforce selectList

Question

All, I have a visualforce SPA that loads a promotional code using a soql query. When I don't rerender the picklist, jquery can easily find the selectList id and its value, and it works great. However, jquery stops working on this picklist after I rerender it, which is a requirement. The rerender is causing the issue but I cannot figure it out why. I even tried to write to the console with no luck, nothing gets written. I tried multiple things from actionsupport to using outputpannel and the like with no improvement. Thoughts?

                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="promo">
                                            <span class="star">*</span>Did you receive a promotion code?</label>
                                        <apex:selectList id="promo" size="1" value="{!selectedPromo}" styleClass="form-control">
                                            <apex:selectOptions value="{!Promo}" />
                                        </apex:selectList>
                                        <p id="msg_promo" />
                                    </div>
                                </div>

.........

        j$(function () {
            j$('[id$="promo"]').change(function () {
                var lstselection = j$('[id$="promo"]').val();
                console.log('promo: ' + lstselection);
                if (lstselection == 'Other') {
                    j$("#section_promo_other").show();
                } else {
                    j$("#section_promo_other").hide();
                }
            });
        });

Answer 1

I believe to have found a workaround that works, although I hope there are better solutions.

1. I added an outputPanel to wrap the selectList.
2. I rerendered both the outputPanel and selectList. However, it works without rerendering the former, but it needs to be present, so I decided to rerender it also.
3. I added select to jquery such as (j$('select[id$="promo"]').val();).

Note 1: I did not have this problem with other picklists that used getdescribe() or hardcoded options. It only happened with those that used a soql query to populate options.

Note 2: All of the above was necessary for jquery to be able to find the values of this picklist.

Again, this works, but I hope there is a good explanation for this, and ideally a better solution.

<div class="col-sm-4">
   <div class="form-group">
       <label for="promo">
           <span class="star">*</span>Did you receive a promotion code?</label>
             <outputPanel id="op_promo">
               <apex:selectList id="promo" size="1" value="{!selectedPromo}" styleClass="form-control">
               <apex:selectOptions value="{!Promo}" />
               </apex:selectList>
             </outputPanel>
           <p id="msg_promo" />
       </div>
</div>

...

    j$(function () {
        j$('[id$="promo"]').change(function () {
            var lstselection = j$('select[id$="promo"]').val();
            console.log('promo: ' + lstselection);

            if (lstselection == 'Other') {
                j$("#section_promo_other").show();
            } else {
                j$("#section_promo_other").hide();
            }
        });
    });