使用 javascript 显示 html 下拉列表选择

Question

我正在尝试在提交选择后使用 js 在 HTML 下拉列表中显示用户选择。我搜索了几个小时并尝试了几种不同的方法，到目前为止，其中 none 方法有效。这是我当前的代码：

<script>
    var e = document.getElementById("user_engine");
    var strUser = e.options[e.selectedIndex].text;
    function showEngineChoice() {
        document.getElementById('engine').innerHTML = 
                    document.getElementById("strUser").value;
    }
</script>
<label><b>What type of engine would you like in your favorite car?</b></label>
<select name="engine_types" id="user_engine">
    <option value="1">In-Line V6</option>
    <option value="2">3.8L 4-cylinder</option>
    <option value="3">Twin Turbo V10</option>
    <option value="4">RS-68 Rocket Engine</option>
</select>
<input type="submit" onclick="showEngineChoice()"><br />
<label>You chose: </label><br />
<p><span id="engine"></span></p><br />
<label>Nice Choice!</label>

我尝试了其他几种方法，每次我运行代码，在做出选择后单击提交按钮都没有任何反应。我做错了什么？

Answer 1

     document.getElementById('engine').innerHTML = 
                document.getElementById("strUser").value;

将'strUser'更改为'user-engine'

Answer 2

您的脚本位于文档正文之前。这意味着您使用 getElementById 引用的元素未定义。这是一个工作示例：https://codepen.io/pablo-tavarez/pen/NwjrYm?editors=1010

   <script>
    // await a fully loaded DOM
    document.addEventListener('DOMContentLoaded', function () {

      // prefetch element references
      var ue = document.getElementById("user_engine");
      var e = document.getElementById('engine');


      // define (global) onsubmit function
      window.showEngineChoice = function showEngineChoice() {
         // update content with CURRENTLY selected option
          e.innerHTML = ue.options[ue.selectedIndex].value;
      }
    });
</script>
<label>
    <b>What type of engine would you like in your favorite car?</b>
</label>
<select name="engine_types" id="user_engine">
    <option value="1">In-Line V6</option>
    <option value="2">3.8L 4-cylinder</option>
    <option value="3">Twin Turbo V10</option>
    <option value="4">RS-68 Rocket Engine</option>
</select>
<input type="submit" onclick="showEngineChoice()"><br />
<label>You chose: </label><br />
<p>
    <span id="engine"></span>
</p><br />
<label>Nice Choice!</label>

Answer 3

除了需要使用 user_engine 而不是 strUser select 正确的元素之外，您可能还想将 .value 替换为 .selectedOptions[0].text.

value 属性 returns 选项的值 - 即 1,2,3 等。而当您访问 selectedOptions[0].text 时，它会为您提供文本第一个 selected 选项。

此外，您必须在 HTML 内容之后保留脚本，以确保在脚本运行时将元素加载到 DOM。

var e = document.getElementById("user_engine");
var strUser = e.options[e.selectedIndex].text;

function showEngineChoice() {
  document.getElementById('engine').innerHTML =
    document.getElementById("user_engine").selectedOptions[0].text;
}

<label><b>What type of engine would you like in your favorite car?</b></label>
<select name="engine_types" id="user_engine">
    <option value="1">In-Line V6</option>
    <option value="2">3.8L 4-cylinder</option>
    <option value="3">Twin Turbo V10</option>
    <option value="4">RS-68 Rocket Engine</option>
</select>
<input type="submit" onclick="showEngineChoice()"><br />
<label>You chose: </label><br />
<p><span id="engine"></span></p><br />
<label>Nice Choice!</label>

使用 javascript 显示 html 下拉列表选择

Displaying html dropdown list selection with javascript

javascript

html-select