我如何使用javascript下拉列表中的输出? [关闭]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我如何使用javascript下拉列表中的输出? [关闭]相关的知识,希望对你有一定的参考价值。

这看起来像是一个完整的菜鸟,如果你在想,那你就是对的。我正在尝试为我的探路者活动使用有限的编码知识为一些朋友做点什么,我知道,有更简单的方法可以做到,但我想要我可以做的事情,然后发送给所有人,以便他们可以使用它。 任何玩“探路者”并且知道“权力之言”的人都会明白为什么我这样做,大多数人都不会得到它。这样做的目的是能够有单独的下拉菜单来选择单词,然后按一个按钮,它从页面本身的预先写入的列表中吐出效果/持续时间/等级/等。我想在尽可能少的文件中创建它,但如果需要,可以使用多个文件。 我知道如何做html和CSS的东西,让它全部工作,看起来很好,但我从来没有真正使用过JS,所以如果你帮助我,请不要随意使用JS。 感谢任何有帮助的人,如果你对此无能为力,我完全理解 编辑:到目前为止这是我的代码,我想要的是能够选择值为'1'的'Personal'并让JS看到并将变量X的值设置为与'1'关联的字符串,然后将其放入.innerHTML输出中。

第二次编辑:经过大量的摆弄,以及来自stoic_monk的帮助,我终于让它像我想的那样工作。多谢你们!

<!doctype html>
<html>
  <body>
      <!-- dropdown -->
    <select id="optselect">
      <option selected="selected" value="1">Hello</option>
      <option value="2">World</option>
      <option value="3">Yoyoma</option>
    </select>
    <!-- output area -->
    <p>output: <strong id="output">-</strong></p>
    <!-- button to confirm value -->
    <button id="bigbutton">Select Value</button>
    <!-- button to decide text -->
    <button id="confirm" onclick="displayOutput()">Confirm Selection</button>


    <!-- script area -->
    <script>
        var button = document.getElementById('bigbutton');
        var select = document.getElementById('optselect');

      button.addEventListener('click', function (event) {
        console.log(select.value);
        console.log(select.options[select.selectedIndex].text);
        document.getElementById('output').innerHTML = select.options[select.selectedIndex].text;
      });

      //output
      function displayOutput() {
        var monsterManual = "it didn't work";
        var select = document.getElementById('optselect');

        console.log(select.value);

        if (select.value === '2') {
            monsterManual = "it worked";
        }
        else if (select.value === '3') {
            monsterManual = "worked again";
        }
        else if (select.value ==='1') {
            monsterManual = "it kinda worked";
        }
        //end of the if/else if
        document.getElementById('output').innerHTML = monsterManual;
        console.log(monsterManual);
        }

    </script>
  </body>
</html>
答案
<!doctype html>
<html>
  <body>
    <select id="optselect">
      <option selected="selected" value="1">Hello</option>
      <option value="2">World</option>
      <option value="3">Yoyoma</option>
    </select>
    <div id="output"></div>
    <button id="bigbutton">Gogo</button>
    <script>
      var button = document.getElementById('bigbutton');
      var select = document.getElementById('optselect');

      button.addEventListener('click', function (event) {
        console.log(select.value);
        console.log(select.options[select.selectedIndex].text);
        document.getElementById('output').innerHTML = select.options[select.selectedIndex].text;
      });
    </script>
  </body>
</html>

以上是关于我如何使用javascript下拉列表中的输出? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何创建多个从同一个数组中获取值的动态下拉列表,而无需更改 Javascript 中的其他下拉列表

使用javascript为下拉列表赋值

python GAE中的动态下拉列表

如何使用javascript使两个选定的索引在pdf下拉列表中匹配

如何使用Javascript根据先前的下拉值显示第二个下拉列表

如何将 javascript 与 asp.net 下拉列表控件一起使用?