Javascript 从<；选择>；和写入输出_Javascript

Javascript 从<；选择>；和写入输出

javascript

Javascript 从<；选择>；和写入输出,javascript,Javascript,我想用“排行榜”中的值来确定“排行榜”中打印的内容。我似乎不知道我错在哪里。我想这是我最接近于让它发挥作用的一次。如何将局部变量团队从函数内部传递到“排行榜” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jos

我想用“排行榜”中的值来确定“排行榜”中打印的内容。我似乎不知道我错在哪里。我想这是我最接近于让它发挥作用的一次。如何将局部变量团队从函数内部传递到“排行榜”

<!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>


何塞·库埃沃
var团队=新阵列（5）；
团队[0]=“Jenny Kropp Whitney Pavlik”；
团队[1]=“Jennifer Fopma Brooke Sweat”；
团队[2]=“克里斯汀·巴特·拉奎尔·费雷拉”；
团队[3]=“Emily Day Heather Hughes”；
团队[4]=“Christal Engle Tealle Hunkus”；
功能列表团队（sel）{
var i=document.getElementById（'standings'）。值；
var团队=团队[i]；
}
第一名
第二名
第三名
第四名
第五名
写作（团队）；

由于您希望将结果放在option元素中，因此只需在正在使用的函数中执行innerHTML即可。因此，这将如下所示：

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

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

  }

当然，在option元素上添加一个id

另外，请查看网站，它对使用innerHTML有一些很好的解释，这应该可以满足您的需要：

<!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>


何塞·库埃沃
第一名
第二名
第三名
第四名
第五名
//将脚本块放在正文的末尾，以确保所有其他元素都已删除
//已加载到DOM中（因此在需要时存在）。
//
//“新数组”在这里没有帮助，所以使用文字符号代替。
风险值团队=[
“Jenny Kropp Whitney Pavlik”，
“Jennifer Fopma Brooke Sweat”，
“克里斯汀·巴特·拉奎尔·费雷拉”，
“艾米丽·戴希瑟·休斯”，
“克丽斯塔尔·恩格尔·蒂尔·亨库斯”
],
listTeam=功能listTeam（sel）{
var val=document.getElementById（'standings'）.value，//获取所选值
team=teams[val]，//根据值获取所选团队
opt=document.createElement（'option'），//创建一个元素
lb=document.getElementById（'Leadboard'），//获取排行榜选择元素
children=lb.children.length，//存储子元素的数量
child=null，//声明一个变量以存储子元素
i=0；//递增
opt.innerText=team；//设置innerText
对于（i=0；i

document.write（）在第一次处理页面时，只会调用一次。（

document.write（）

通常不再有用。）也就是说，在

排行榜中更改所选值不会更改排行榜。您应该更改此值，以便listTeam（）
使用DOM操纵来更改排行榜
元素的内容。（一种简单的方法是使用）仅对答案进行一点扩展。每当您包含
标记时，浏览器将在加载页面的该部分后立即运行该代码。在这种情况下，排行榜的选项标记将执行doc.write（）
马上。我猜您希望等到他们选择了某个内容后再这样做。将所有HTML视为为为信息提供了一个结构和占位符，然后当某些内容更改或用户提供输入时，JavaScript函数将更改HTML占位符中的信息。