使用javascript

Question

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

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

改变＆＃39; strUser＆＃39;到用户引擎＆＃39;

Answer 2

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

getElementById

Answer 3

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

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;