Attempting to check dropdown value on load and it is not functioning.

Question

So this should be pretty straight forward and I am not sure why I am running into an issue

I have the following dropdown list created on a .jsp page

<form:select path="affProgramSessionList[${stIndx}].affidavitAttendeeTypeDetailDto.attendeeType" id="facultyAttendee_${session.id}" onchange="showFacultyInfo(this)">
<c:if test="${contains eq true}">
    <c:if test="${facultyMember eq true}">
        <form:option value="Attendee" label="Attendee" />
        <form:option value="Faculty" label="Faculty" selected="selected" />
    </c:if>
    <c:if test="${facultyMember eq false}">
        <form:option value="Attendee" label="Attendee" selected="selected"/>
        <form:option value="Faculty" label="Faculty"  />
    </c:if>
</c:if>
<c:if test="${contains eq false}">
    <form:option value="Attendee" label="Attendee" selected="selected" />
    <form:option value="Faculty" label="Faculty"  />
</c:if>
</form:select>

This behaves as it should and creates a drop down with two options.

As you can see from the code depending on what conditions are true/false will determine which value is automatically selected.

If the value is "Faculty" there are a few hidden fields that are should be shown.

You will notice a function is called by the onchange() event. I will show you the code for that function below as well.

Upon document.ready the following code runs

$("input[id*='facultyAttendee_']").each(function() {
    if ($(this).val() === "Faculty" ) {
        showFacultyInfo(this);
    }
});

That calls the same function that manually changing the drop down does as mentioned above

function showFacultyInfo(elt){
var dataid = elt.id.split('_')[1];
if(elt.value==='Faculty') {
    $('#' + "facultyDetail_" + dataid).show();
    $('#' + 'fullAttendenceNY_' + dataid ).val("Yes");
    $('#' + 'fullAttendenceNY_' + dataid ).prop('disabled', true);
    $('#' + 'partialAtt_' + dataid).hide();
}
else {
    $('#' + "facultyDetail_" + dataid).hide();
    $('#' + 'fullAttendenceNY_' + dataid ).prop('disabled', false);
}
}

This code works for the manual dropdown change but doesn't seem to be called like it should be on document.load if the value in drop down is already faculty.

Any help to figure out why is appreciated it.

thanks

Answer 1

Try this. It is simpler

I had to change input[ to select[

 $(function() { $("select[id^='facultyAttendee_']").on("change", function() { var show = $(this).val() === "Faculty", dataid = this.id.split("_")[1]; $("#partialAtt_" + dataid).toggle(!show); $("#facultyDetail_" + dataid).toggle(show); $("#fullAttendenceNY_" + dataid).val(show?"Yes":"No"); $("#fullAttendenceNY_" + dataid).prop('disabled', show); }).change(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Attendee: <select id="facultyAttendee_xxx"> <option value="Attendee">Attendee</option> <option value="Faculty" selected="selected" >Faculty</option> </select><br/> fullAttendenceNY: <select id="fullAttendenceNY_xxx"> <option value="Yes">Yes</option> <option value="No">No</option> </select> <div id="facultyDetail_xxx">facultyDetail</div><br/> <div id="partialAtt_xxx">partialAtt</div>