Access Apex:SelectList values from JQuery

Question

I'm having following code to access the selected values of a picklist. But i'm getting 'undefined' as the value whenever i read from JS. Here is the code

<div class="slds-form-element__row"> 
    <div class="slds-form-element"> 
        <div name="1_lbl" Class="slds-form-element__label">Picklist 1</div>                                    
        <div class="slds-form-element__control">
            <div class="slds-select_container">
                <apex:selectList size="1" value="{!loadPicklist1}" styleClass="slds-select" id="1_id">
                    <apex:selectOptions value="{!loadPicklistValues}" />
                    <apex:actionSupport event="onchange"  action="{!loadAnotherItems}"/>
                </apex:selectList>
            </div>
        </div>
    </div>
</div>

And here is my JQuery code to access the value. The button id related to the event is buttonId.

j$('#buttonId').on('click',function(e){                
    //debugger;
    var 1Type = j$('#1_id').val();

    alert(1Type);

});

Please help to identify why I'm getting undefined even though I pick a value here.

Answer 1

Visualforce element's id are auto-generated, So to access them in jQuery one of the easier method is to use ends with selector.

In your example, you can refer access the selected value as follows:

j$("select[id$='1_id']").val();

Refer this blog for details more details and with different approach - VisualForce Element Ids in jQuery selectors.