避免在启动jsp时加载javascript onchange函数

Question

我的<script></script>在启动时使用onchange函数（onchangeFunction（））加载它。 这意味着没有onchange事件（从下拉表单中选择）实际发生。

这意味着访问空/不可用变量的函数结束异常。

HTML

<td align="center" valign="top" class="reservation">
    <form name="showSelector">
        <h2 style="font-family:arial"> הזמנת כרטיסים: </h2>
        <select name="Theater" class="selectFirst" onchange="theaterChange()">
            <option value="999">theater...</option>

            <c:forEach var="theater" items="${theaters}" varStatus="iter">

                <option value="${theaters[iter.index].id}">"${theaters[iter.index].name}"    
                </option>

            </c:forEach>

        </select>
        <select name="Movie">
            <option>movie...</option>
        </select>
        <p></p>
        <input type="submit" value="continue">
    </form>
</td>

的JavaScript

var group = new Array()
var temp = document.showSelector.Movie
var selectedTheater = -1;

function theaterChange() {
    selectedTheater = document.showSelector.Theater;
    var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;
    var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;
    if (1 == 555) { //this is trying to avoid the function content, but debugger continues as if condition is true
        <% for (int i = 0; i < showIds.length; i++) { % >
            if ( <%= showAtTheater[i] %> == selcetedTheaterId) { <% MovieIdInSelectedTheater.add(showAtTheater[i]);
                idx = 0;
                boolean found = false;
                while (!found & idx < showAtTheater.length & idx < movieIds.length) {
                    if (showAtTheater[i] == movieIds[idx]) {
                        MovieNameInSelectedTheater.add(movieNames[idx]);
                        found = true;
                    } else {
                        idx++;
                    }
                } %>
            }
        <% } %>
        //...removed some function logic
        temp.options[0].selected = true
    }
}

servlet

out.write("<script>\n");
      out.write("var group=new Array()\n");
      out.write("\n");
      out.write("var temp=document.showSelector.Movie\n");
      out.write("var selectedTheater=-1;\n");
      out.write("\n");
      out.write("function theaterChange(){\n");
      out.write("\n");
      out.write("selectedTheater = document.showSelector.Theater;\n");
      out.write("var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;\n");
      out.write("//var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;\n");
      out.write("\n");
 MovieNameInSelectedTheater.clear(); 
      out.write('\n');
 MovieIdInSelectedTheater.clear(); 
      out.write("\n");
      out.write("\n");
      out.write("\n");
 for (int i=0;i<showIds.length;i++ ){ 
      out.write("\n");
      out.write("        if (");
      out.print(showAtTheater[i]);
      out.write(" == selcetedTheaterId)\n");
      out.write("        {\n");
      out.write("            ");

            MovieIdInSelectedTheater.add(showAtTheater[i]);
            idx = 0;
            boolean found = false;
            while (!found & idx<showAtTheater.length & idx<movieIds.length){
                if (showAtTheater[i] == movieIds[idx] )
                    {
                    MovieNameInSelectedTheater.add(movieNames[idx]);
                    found = true;
                    }
                else {idx++;}
            }

      out.write("\n");
      out.write("        }\n");
      out.write("  ");
  } 
      out.write("\n");
      out.write("\n");
      out.write("\n");
 for (int i=0;i<MovieNameInSelectedTheater.size();i++){ 
      out.write("\n");
      out.write("    temp.options[");
      out.print(i);
      out.write("]=new Option(\"");
      out.print( MovieNameInSelectedTheater.get(i) );
      out.write("\",\"");
      out.print( MovieIdInSelectedTheater.get(i) );
      out.write("\")\n");
}
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("\n");
      out.write("temp.options[0].selected=true\n");
      out.write("\n");
      out.write("}\n");
      out.write("\n");
      out.write("</script>");

浏览器端：

<script>
var group=new Array()

var temp=document.showSelector.Movie
var selectedTheater=-1;

function theaterChange(){

selectedTheater = document.showSelector.Theater;
var selcetedTheaterId = selectedTheater.options[selectedTheater.selectedIndex].value;
//var selcetedTheaterName = selectedTheater.options[selectedTheater.selectedIndex].text;






        if (2 == selcetedTheaterId)
        {

        }









temp.options[0].selected=true

}

</script>

Answer 1

您期望Java / JSP和JavaScript在Web浏览器中逐行同步运行。这是不真实的。 Java / JSP在webserver上运行并生成HTML / CSS / JS。 Web服务器将其发送到webbrowser，后者又运行HTML / CSS / JS。如果Java / JSP已正确完成其任务，您应不在生成的HTML / CSS / JS源代码中查看它的任何行。 Webbrowser无论如何都不理解Java / JSP代码。

我知道您希望能够填充子/嵌套下拉列表。你必须采取一种完全不同的方法。基本上有3种方式：

1. 让JavaScript在onchange期间提交表单，如onchange="submit()"，让Java / JSP根据父下拉列表的选定值动态打印子下拉列表所需的<option>值。 / p>

2. 让Java / JSP打印JavaScript怪物数组的所有可能值，并让JavaScript根据数组提供的信息填充它，如onchange="populateChild(this)"。

3. 让JavaScript将带有选定值的ajax请求作为参数发送到servlet，servlet又根据所选值返回子下拉列表的值，并让JavaScript填充它。 jQuery对此非常有帮助。

更详细的代码示例可以在this answer中找到。