javascript - 尝试检查负载上的下拉值，但它不起作用。

Question

所以这应该是非常简单的，我不确定为什么我遇到了问题

我在 .jsp 页面上创建了以下下拉列表

<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>

这将按其应有的方式运行，并创建一个包含两个选项的下拉菜单。

正如您从代码中看到的那样，根据条件为真/假将确定自动选择哪个值。

如果值为“Faculty”，则应显示一些隐藏字段。

您会注意到 onchange() 事件调用了一个函数。下面我还将向您展示该函数的代码。

在 document.ready 上运行以下代码

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

这调用了与上面提到的手动更改下拉菜单相同的函数

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

此代码适用于手动下拉列表更改，但如果下拉列表中的值已经是教师，则似乎不会像在 document.load 上那样调用。

任何有助于找出原因的帮助都会受到赞赏。

谢谢

Answer 1

试试这个。比较简单

我必须更改输入[以选择[

$(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>