javascript - 无法为选择选项调用位于与 HTML 文件不同的文件和文件夹中的 JavaScript 函数

问题描述

大家好，我有以下 Webapp 项目结构

我的 classregister.html 应该在“脚本”文件中调用我的函数。但是，我认为它不会这样做，因为我无法从第二个下拉列表中进行选择。如果我在同一个文件中使用或 jsfiddle 具有该功能，它确实有效。请问我哪里错了？

calssregister.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
</head>
<body>
    <form id="classregister" action="#" method="post">

        <div>
            <p>
                <label class="category_div" id="category_div">Please select
                    Style: 
                    <select name="category" class="required-entry" id="category"
                    onchange="return dynamicdropdown()">
                        <option value="">Select Style</option>
                        <option value="X">X</option>
                        <option value="Y">Y</option>
                        <option value="Z">Z</option>
                        <option value="A">A</option>
                </select>
                </label>
            </p>
            <p>
                <label class="sub_category_div" id="sub_category_div">Please
                    select your Level: <select name="subcategory" id="subcategory"
                    onchange="return dynamicdropdownone()">
                        <option value="">Please select your Level</option>
                </select>
                </label>
            </p>

            <p>
                <label class="sub_subcategory_div" id="sub_subcategory_div">Please
                    select Dance Class: <select name="sub_subcategory"
                    id="sub_subcategory" multiple>
                        <option value="">Please select a Dance Class</option>
                </select>
                </label>
            </p>
        </div>

    </form>
    <script src="scripts/myfunctions.js"></script>
</body>
</html>

myfunctions.js 看起来像这样：

function dynamicdropdown() {
  var e = document.getElementById("category");
  var listindex = e.options[e.selectedIndex].value;
  //listindex = this.options[this.selectedIndex].value;
  document.getElementById("sub_subcategory").length = 0;
  document.getElementById("sub_subcategory").options[0] = new Option("Please select your Level", "");
  document.getElementById("subcategory").length = 0;
  switch (listindex) {
    case "X":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "X_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "X_Intermediate");
      break;

    case "Y":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "Y_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "Y_Intermediate");
      break;
    case "Z":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "Z_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "Z_Intermediate");
      break;
    case "A":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "A_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "A_Intermediate");
      break;
    default:
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      break;
  }
  return true;
}

function dynamicdropdownone() {
  var e = document.getElementById("subcategory");
  var listindex = e.options[e.selectedIndex].value;

  var selector = document.getElementById("sub_subcategory");

  document.getElementById("sub_subcategory").length = 0;
  switch (listindex) {
    case "X_Beginner":
      var monday = 1;
      var mondays = getSpecificDayInAMonth(monday).length;


      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
      for (var i = 1; i < mondays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(monday)[i] + " 19:00-20:00 ", "monday_1900_2000");
        selector.options[i] = new Option(getSpecificDayInAMonth(monday)[i] + " 20:00-21:00 ", "monday_2000_2100");
      }

      break;

    case "X_Intermediate":
      var wednesday = 3;
      var wednesdays = getSpecificDayInAMonth(wednesday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
      for (var i = 1; i < wednesdays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(wednesday)[i] + " 19:00-20:30 ", "wednesday_1900_2030");
      }
      break;
    case "Y_Beginner":
      var thursday = 4;
      var thursdays = getSpecificDayInAMonth(thursday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < thursdays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(thursday)[i] + " 19:00-20:00 ", "thursday_1900_2000");
      }
      break;

    case "Y_Intermediate":
      var thursday = 4;
      var thursdays = getSpecificDayInAMonth(thursday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < thursdays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(thursday)[i] + " 20:00-21:00 ", "thursday_2000_2100");
      }
      break;

    case "Z_Beginner":
      var tuesday = 4;
      var tuesdays = getSpecificDayInAMonth(tuesday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < tuesdays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(tuesday)[i] + " 19:00-20:00 ", "tuesday_1900_2000");
      }
      break;

    case "Z_Intermediate":
      var tuesday = 2;
      var tuesdays = getSpecificDayInAMonth(tuesday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < tuesdays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(tuesday)[i] + " 20:00-21:00 ", "tuesday_2000_2100");
      }
      break;

    case "A_Beginner":
      var friday = 5;
      var fridays = getSpecificDayInAMonth(friday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < fridays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(friday)[i] + " 19:00-20:00 ", "friday_1900_2000");
      }
      break;

    case "A_Intermediate":
      var friday = 4;
      var fridays = getSpecificDayInAMonth(friday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < fridays; i++) {
        selector.options[i] = new Option(getSpecificDayInAMonth(friday)[i] + " 20:00-21:00 ", "friday_2000_2100");
      }
      break;
    default:
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
      break;
  }
  return true;
}

标签： javascripthtmleclipsejspweb-inf

javascript - 无法为选择选项调用位于与 HTML 文件不同的文件和文件夹中的 JavaScript 函数

问题描述

解决方案

推荐阅读