避免在jsp启动时加载javascript上的更改函数

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在the浏览器中逐行同步运行。这是假的。Java/JSP在JSP服务器上运行，并生成HTML/CSS/JS。Webserver将其发送到webbrowser，后者依次运行HTML/CSS/JS。如果/已经正确地完成了它的任务，那么您应该在生成的HTML/JS源代码中看到它的任何行，而不是。无论如何，Webbrowser并不理解Java/JSP代码。

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

onchange="populateChild(this)".

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

1. 让Java/JSP打印JavaScript怪兽数组的所有可能值，并让JavaScript根据数组在onchange期间提供的信息填充表单，如
2. JavaScript，将所选值作为参数发送给servlet，然后根据所选值返回子下拉列表的值，并让JavaScript填充它。jQuery在这方面非常有用。

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