Question

我想使用“排名”中的值来确定“排行榜”中打印的内容我似乎无法弄清楚我哪里出错了。我认为这是我最接近它的工作方式。如何将本地变量团队从函数内部传递到“排行榜”？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Jose Cuervo PBV</title>
        <link href="rosters.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
            var teams = new array(5);
                teams[0] = "Jenny Kropp         Whitney Pavlik";
                teams[1] = "Jennifer Fopma      Brooke Sweat";
                teams[2] = "Kristen Batt        Raquel Ferreira";
                teams[3] = "Emily Day           Heather Hughes";
                teams[4] = "Christal Engle      Tealle Hunkus";

                function listTeam(sel) {
                    var i = document.getElementById('standings').value;
                    var team = teams[i];
                }
</script>
    </head>

    <body>
        <img src = "./images/Cuervo_Logo.jpg" alt = "Cuervo PBV Logo" />
        <select id='standings' name='standings' onchange="listTeam(this)">
            <option value='0'>First Place</option>
            <option value='1'>Second Place</option>
            <option value='2'>Third Place</option>
            <option value='3'>Fourth Place</option>
            <option value='4'>Fifth Place</option>
        </select>

        <select id='leaderBoard' name='leaderBoard' multiple="multiple" size="1" style="width: 300px;" >
            <option>
                <script type="text/javascript">
                    document.write(team);
                </script>
            </option>
        </select>
    </body>
</html>

Answer 1

由于您希望将结果放在option元素中，因此您可以在正在使用的函数内部执行innerHTML。所以这看起来如下：

  function listTeam(sel) {
     var i = document.getElementById('standings').value;
     var team = teams[i];

     document.getElementById('leaderBoardOptions').innerHTML = team;

  }

当然，在选项元素上添加了一个id。

<option id="leaderBoardOptions"></option>

还查看了this网站，它对使用innerHTML

有一些很好的解释

Answer 2

这应该做你想要的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
        <title>Jose Cuervo PBV</title>
        <link href="rosters.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <img src = "./images/Cuervo_Logo.jpg" alt = "Cuervo PBV Logo" />
    <select id='standings' name='standings' onchange="listTeam(this)">
        <option value='0'>First Place</option>
        <option value='1'>Second Place</option>
        <option value='2'>Third Place</option>
        <option value='3'>Fourth Place</option>
        <option value='4'>Fifth Place</option>
    </select>
    <select id='leaderBoard' name='leaderBoard' multiple="multiple" size="1" style="width: 300px;" ></select>
    <script type="text/javascript">
        //put script block at end of body to ensure all other elements have already
        //been loaded into the DOM (and therefore exist when we need them to.
        //
        //"new Array" is not helpful here, so use literal notation instead.
        var teams = [
                "Jenny Kropp         Whitney Pavlik",
                "Jennifer Fopma      Brooke Sweat",
                "Kristen Batt        Raquel Ferreira",
                "Emily Day           Heather Hughes",
                "Christal Engle      Tealle Hunkus"
            ],
            listTeam = function listTeam(sel) {
                var val = document.getElementById('standings').value, //get the selected value
                    team = teams[val],  //get the selected team, based on value
                    opt = document.createElement('option'), //create an <option> element
                    lb = document.getElementById('leaderBoard'), //get the leaderBoard select element
                    children = lb.children.length, //store the number of <option> child elements
                    child = null, //declare a variable to store an <option> child element
                    i = 0; //incrementor
                opt.innerText = team; //set the innerText
                for (i = 0; i < children; i += 1) {
                    //loop through every child element of leaderBoard
                    child = lb.children[0]; //store reference to element
                    lb.removeChild(child); //remove from leaderBoard
                }
                lb.appendChild(opt); //add new <option> element 
            };
        listTeam(); //call function on initial load as the leaderBoard select element has a selected child
    </script>
</body>
</html>

从<select>获取值并写入输出</select>

2 个答案: