Question

当我在名为movie的选择框中选择某个选项时，我正在尝试更改名为session的选择框中显示的选项。

这是我到目前为止的剧本。

<script>
            var optionList = document.getElementsByName("movie")[0];
            var movieList = ["AC", "CH", "AF", "RC"];

            for(var i = 0; i < movieList.length; i++){
                var movie = movieList[i];
                var option = document.createElement("option");
                option.textContent = movie;
                option.value = movie;
                optionList.appendChild(option);
            }
        </script>
        <script>
            var sessionList = document.getElementsByName("session")[0];
            var actionSession = ["WED-09", "THU-09", "FRI-09", "SAT-09", "SUN-09"];
            var childrenSession = ["MON-01", "TUE-01", "WED-06", "THU-06", "FRI-06", "SAT-12", "SUN-12"];
            var foreignSession = ["MON-06", "TUE-06", "SAT-06", "SUN-06"];
            var romanticSession = ["MON-09", "TUE-09", "WED-01", "THU-01", "FRI-01", "SAT-06", "SUN-06"];

            if(document.getElementsByName("movie")[0].value === movieList[0])
            {
                for(var i = 0; i < actionSession.length; i++){
                    var session = actionSession[i];
                    var option = document.createElement("option");
                    option.textContent = session;
                    option.value = session;
                    sessionList.appendChild(option);
                }
            }
        </script>

Answer 1

你可以创建一个字典，将movieList的元素映射到<option>个元素列表吗？

您可以调用字典sessionOptions。然后，您会立即更改#session的所有子项 - 因此，这将包含在onchange的{{1}}处理程序中：

sessionList

您还希望将电影代码映射到会话列表：

var sessionList = document.getElementsByName("session")[0];
var chosenMovie = "..."; // "AC", for instance

// Remove all elements from sessionList
while(sessionList.firstChild) {
    sessionList.removeChild(sessionList.firstChild);
}

// Add the chosen movie options
var chosenMovieOptions = sessionOptions[chosenMovie];
for(var i = 0; i < chosenMovieOptions.length; i++) {
    sessionList.appendChild(chosenMovieOptions[i]);
}

然后，要为每个“会话字符串列表”（例如var SESSION_LISTS = { "AC": ["WED-09", "THU-09", "FRI-09", "SAT-09", "SUN-09"], "CH": ["MON-01", "TUE-01", "WED-06", "THU-06", "FRI-06", "SAT-12", "SUN-12"], "AF": ["MON-06", "TUE-06", "SAT-06", "SUN-06"], "RC": ["MON-09", "TUE-09", "WED-01", "THU-01", "FRI-01", "SAT-06", "SUN-06"] };）构建sessionOptions，您将遍历会话列表并创建元素：

actionSession

但是你会为var currentSession = "..."; // currentSession is the current session list - "AC", for instance var currentSessionOptions = SESSION_LISTS[currentSession]; sessionOptions[currentSession] = []; for(var i = 0; i < currentSessionOptions.length; i++){ var session = currentSessionOptions[i]; var option = document.createElement("option"); option.textContent = session; option.value = session; sessionOptions[currentSession].append(option); }中的每个子列表执行此操作，因此您可以将此代码放在某个初始化函数中：

SESSION_LISTS

Answer 2

考虑将Sessions更改为对象，如下所示：

show

这样，您可以使用var sessions = { "AC": ["WED-09", "THU-09", "FRI-09", "SAT-09", "SUN-09"], "CH": ["MON-01", "TUE-01", "WED-06", "THU-06", "FRI-06", "SAT-12", "SUN-12"], "AF": ["MON-06", "TUE-06", "SAT-06", "SUN-06"], "RC": ["MON-09", "TUE-09", "WED-01", "THU-01", "FRI-01", "SAT-06", "SUN-06"] }标记的onchange来获取所选select的值，并引用相应影片列表的会话列表：< / p>

option

只需按照以下语法，javascript中的

var category = document.getElementByName("movie").value; var currentSession = sessions[category]; for(var i = 0; i < currentSession.length; i++){ var session = currentSession[i]; var option = document.createElement("option"); option.textContent = session; option.value = session; sessionList.appendChild(option); }可以作为Objects对引用： "key" => "value"和object = { "key": value }的类型可以是任何内容 - 甚至是另一个value！

你甚至可以像这样声明对象键：

Object

这是正确的 - 所有上述声明都可以作为会话['xx']

引用

希望这会简化一些事情。

的JavaScript。根据前一个选项更改表单选项

2 个答案: