Question

在首次加载时，在下拉列表中使用onchange（）时会隐藏文本框，但在选择值后会显示正确的值。为什么它首次加载隐藏？请一些建议！

文本框员工姓名，部门代码，指定代码在首次加载时隐藏。但是从下拉列表中选择后会显示正确的值。

的Javascript

function godata(){

var eid=document.getElementById("empid").value;
document.deduct.action="deductions.jsp?empid="+eid;
document.deduct.method="post";
document.deduct.submit();
}

JSP

GetEmpData data= new GetEmpData();
ArrayList list= data.getEmpData();
Iterator itr = list.iterator();
while (itr.hasNext()){
Employee em=(Employee)itr.next();

Employee Code <select id="empid" name="empid" onchange="godata()">
<option value="0">--</option>
<option value="<%=em.getEmpid()%>"><%=em.getEmpid()%></option>
</select><%}%>

String id= request.getParameter("empid");
GetEmpDataById data1=new GetEmpDataById();
ArrayList dataList= data1.getEmpDataById(id);
Iterator itr1=dataList.iterator();
while(itr1.hasNext()){
Employee emp=(Employee)itr1.next();



Employee Name<input type="text"  name="empname" value="<%=emp.getEmpname()%>" readonly="yes"">
Department Code <input type="text" name="deptcode" value="<%=emp.getDeptcode()%>" readonly="yes">
Designation Code <input type="text" name="desncode" value="<%=emp.getDesncode()%>" readonly="yes">
<%}%>

Answer 1

您仅在onchange()之后调用函数，而是在javascript中window.onload()时调用函数，或者如果使用jquery则调用document.ready()。

Answer 2

谢谢，但问题解决了，实际上形式是在while循环下，为什么这个奇怪的事情发生了。现在我为表单外的每个值声明了字符串，并且它正常工作。如下：

<apex:Stylesheet value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/fullcalendar.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/jquery.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/jquery-ui.custom.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/lib/moment.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.fullCalendarZip,'fullcalendar-2.9.1/fullcalendar.min.js')}"/>    
<apex:includeScript value="{!URLFOR($Resource.BootStrap, 'js/bootstrap.min.js')}" />

<apex:outputPanel id="jsFilter">
   <script>
      var newSource = new Array();
      newSource = [
         <apex:repeat value="{!events}" var="cal">
         {
            title: "{!cal.title}",
            start: '{!cal.startString}',
            end: '{!cal.endString}',
            url: '{!cal.url}',
            allDay: {!cal.allDay},
            className: '{!cal.className}'
         },
         </apex:repeat>
      ];
      $('#calendar').fullCalendar('removeEvents');
      $('#calendar').fullCalendar('addEventSource', newSource);
   </script>
</apex:outputPanel>   


<script>
    //We need to wrap everything in a doc.ready function so that the code fires after the DOM is loaded
    $(document).ready(function() {   
        //Call the fullCallendar method. You can replace the '#calendar' with the ID of the dom element where you want the calendar to go. 
        $('#calendar').fullCalendar({
            header: {

                left: 'prev,next today',

                center: 'title',

                right: 'month,agendaDay'

            },

            editable: false,

            events:

            [
                //At run time, this APEX Repeat will reneder the array elements for the events array

                <apex:repeat value="{!events}" id="repeatId" var="e">

                    {

                        title: "{!e.title}",

                        start: '{!e.startString}',

                        end: '{!e.endString}',

                        url: '{!e.url}',

                        allDay: {!e.allDay},

                        className: '{!e.className}'

                    },

                </apex:repeat>
            ]

        });
    });
</script>

<!--some styling. Modify this to fit your needs-->
<style>

    #cal-options {float:left;}

    #cal-legend { float:right;}

    #cal-legend ul {margin:0;padding:0;list-style:none;}

    #cal-legend ul li {margin:0;padding:5px;float:left;}

    #cal-legend ul li span {display:block; height:16px; width:16px; margin-right:4px; float:left; border-radius:4px;}

    #calendar {margin-top:20px;}

    #calendar a:hover {color:#fff !important;}

    .fc-event-inner {padding:3px;}

    .event-booked {background:#56458c;border-color:#56458c;}

    .event-cancelled {background:#cc9933;border-color:#cc9933;}

    .event-personal {background:#1797c0;border-color:#1797c0;}

</style>

<apex:sectionHeader title="Availability"/>

<apex:outputPanel id="calPanel">

    <apex:form id="formId">
        <!--<apex:input value="{!events}" id="eventList" rendered="false"/>-->
        <!--<apex:actionFunction name="CallApexMethod" action="{!filterSelection}" onComplete="alert('After apex method') ;" />-->
        <div class="row">
            <div class="col-md-3">
                <label>Center</label>
                <!--<apex:actionRegion >-->
                <apex:selectList id="center" label="Center" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedCenter}">
                    <apex:actionSupport event="onchange" reRender="jsFilter" action="{!filterSelection}"/>
                    <apex:selectoptions value="{!centersList}"></apex:selectoptions>
                </apex:selectList> 
                <!--</apex:actionRegion>-->
            </div>

            <div class="col-md-3">
                 <label>Course</label>
                 <apex:selectList id="course" label="Course" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedCourse}">
                    <apex:selectoptions value="{!coursesList}"></apex:selectoptions>
                </apex:selectList> 
            </div>
            <div class="col-md-3">
                <label>Consultant</label>
                <apex:selectList id="consultant" label="Consultant" styleClass="form-control" size="1"  multiselect="false"  value="{!selectedConsultant}">
                    <apex:selectoptions value="{!consultantsList}"></apex:selectoptions>
                </apex:selectList>
            </div>
        </div>

        <div id="cal-legend">

            <ul>

                <li><span class="event-booked"></span>Booked</li>

                <li><span class="event-cancelled"></span>Cancelled</li>

                <li style="{!IF(includeMyEvents,'','display:none')}"><span class="event-personal"></span>Open</li>

            </ul>

            <div style="clear:both;"><!--fix floats--></div>

        </div>

        <div style="clear:both;"><!--fix floats--></div>

        <div id="calendar"></div>

    </apex:form>

</apex:outputPanel>

在下拉列表中使用onchange（）时隐藏文本框

2 个答案: