0

这是我的代码：

<html>
    <style type="text/css">
        select {font-family: helvetica; font-size:24; text-align:center; width: 400px;}
        #message {font-family:helvetica; font-size:24; text-align:center;}
    </style>
    <table>
        <tr>
            <td>
                <select name="course" class="ddList">
                    <option value=""> (please select a course) </option>
                    <option value="physics">Physics</option>
                    <option value="calc">Calculus</option>
                    <option value="stats">Statistics</option>
                    <option value="engl">English</option>
                    <option value="hist">US History</option>
                    <option value="compsci">Computer Science</option>
                </select>
            </td>    
            <td>
                <button onClick="showCourse()">Describe me!</button>
            </td>
        </tr>
    </table>
    <div id="message">Please select a course.</div>

    <script>
        function showCourse(){
            var op = document.getElementById("course").value;
            var desc = "";
            if(op == "physics")
                desc = "Description of AP physics goes here...";
            else if(op == "calc")
                desc = "Description of AP calculus goes here...";
            else if(op == "stats")
                desc = "Description of AP statistics goes here...";
            else if(op == "engl")
                desc = "Description of AP english goes here...";
            else if(op == "hist")
                desc = "Description of AP US history goes here...";
            else if(op == "compsci")
                desc = "Description of AP computer science goes here...";
            else
                desc = "Please select a course to see the description."
            document.getElementById("message").innerHTML = desc;
        }
    </script>
</html>

基本上我希望通过下拉菜单中选择的选项来修改 div“消息”。但是它不起作用，我不知道为什么。我已经多次查看代码。我认为另一双眼睛会有所帮助。

4

3 回答 3

1

您尝试从具有 id 的元素中获取值course，但没有这样的元素。

我假设这select是您要使用的：

<select name="course" id="course" class="ddList">
于 2013-04-21T01:16:06.033 回答
0

我认为最好使用 jQuery click 事件来完成。使用点击事件有助于将您的设计与 JavaScript 分开，这总是一件好事。

这是一个有效的 JSFIDDLE：http: //jsfiddle.net/paxm8/

HTML：

<select id='course' name="course" class="ddList">
            <option value=""> (please select a course) </option>
            <option value="physics">Physics</option>
            <option value="calc">Calculus</option>
            <option value="stats">Statistics</option>
        </select>
        <button id='showcourse' >Describe me!</button>

        <div id="message">Please select a course.</div>

JS：

$(document).on("click","#showcourse",function(){
var op = document.getElementById('course').value
       if(op == "physics")
        desc = "Description of AP physics goes here...";
    else if(op == "calc")
        desc = "Description of AP calculus goes here...";
    else if(op == "stats")
        desc = "Description of AP statistics goes here...";
    else if(op == "engl")
        desc = "Description of AP english goes here...";
    else if(op == "hist")
        desc = "Description of AP US history goes here...";
    else if(op == "compsci")
        desc = "Description of AP computer science goes here...";
    else
        desc = "Please select a course to see the description."
    document.getElementById("message").innerHTML = desc;
});
于 2013-04-21T01:14:45.277 回答
0

script首先，您应该在调用函数之前将标签移到顶部showCourse()：

<html>
<style type="text/css">
    select {font-family: helvetica; font-size:24; text-align:center; width: 400px;}
    #message {font-family:helvetica; font-size:24; text-align:center;}
</style>

<script>
    function showCourse(){
        var op = document.getElementById("course").value;
        var desc = "";
        if(op == "physics")
            desc = "Description of AP physics goes here...";
        else if(op == "calc")
            desc = "Description of AP calculus goes here...";
        else if(op == "stats")
            desc = "Description of AP statistics goes here...";
        else if(op == "engl")
            desc = "Description of AP english goes here...";
        else if(op == "hist")
            desc = "Description of AP US history goes here...";
        else if(op == "compsci")
            desc = "Description of AP computer science goes here...";
        else
            desc = "Please select a course to see the description."
        document.getElementById("message").innerHTML = desc;
    }
</script>
<table>
    <tr>
        <td>
            <select name="course" class="ddList">
                <option value=""> (please select a course) </option>
                <option value="physics">Physics</option>
                <option value="calc">Calculus</option>
                <option value="stats">Statistics</option>
                <option value="engl">English</option>
                <option value="hist">US History</option>
                <option value="compsci">Computer Science</option>
            </select>
        </td>   
        <td>
            <button onClick="showCourse()">Describe me!</button>
        </td>
    </tr>
</table>
<div id="message">Please select a course.</div>
</html>

其次，您忘记在select标签中指定 id 属性：

<select name="course" id="course" class="ddList">
于 2013-04-21T01:32:19.957 回答