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

Question

我的 在启动时加载 onchange 函数 ( onchangeFunction() )。 这意味着 onchange 事件（从下拉表单中选择）实际上没有发生。

这意味着访问 null/不可用变量的函数最终会引发异常。

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 在网络浏览器中逐行同步运行。这是不真实的。 Java/JSP 在网络服务器上运行并生成 HTML/CSS/JS。网络服务器将其发送到网络浏览器，然后网络浏览器运行 HTML/CSS/JS。如果 Java/JSP 正确完成了其任务，您应该看不到在生成的 HTML/CSS/JS 源代码中看到它的任何行。无论如何，Webbrowser 无法理解 Java/JSP 代码。

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

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

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

3. 让 JavaScript 向 servlet 发送一个以所选值作为参数的 ajax 请求，该 servlet 又根据所选值返回子下拉列表的值，并让 JavaScript 填充它。 jQuery 在这方面非常有帮助。

更详细的代码示例可以在此答案中找到。