使用函数 onclick innerhtml

Question

我遇到了一点 JavaScript 代码，它应该为我的选项创建一个变量并将其发回。我真的看不出问题在哪里，有人可以纠正我吗。

<script type="text/javascript">
function myfunction() {
  var login = document.getElementById('opt').innerHTML;
  document.getElementById('champs1').innerHTML = login;
}
</script>


<div class="row">
    <select>
        <?php foreach ($page->items as $user): ?>
            <option id="opt" onclick="myfunction()"><?php echo $user->getLogin() ?></option>
        <?php endforeach; ?>
    </select>
    <h3 id="champs1"></h3>
</div>

Answer 1

有几个问题：

你不能重复id。 <option> 标签将始终具有相同的 id。
<option> 没有 click 活动。您应该为 <select>.

change

以下可能有效。

<select id="opt" onchange="myfunction()">
    <?php foreach ($page->items as $user): ?>
        <option><?php echo $user->getLogin() ?></option>
    <?php endforeach; ?>
</select>

并将脚本更改为：

<script type="text/javascript">
function myfunction() {
  var login = document.getElementById('opt');
  var opt = login.options[login.selectedIndex];
  document.getElementById('champs1').innerHTML = opt.innerHTML;
}
</script>

片段：

function myfunction() {
  var login = document.getElementById('opt');
  var opt = login.options[login.selectedIndex];
  document.getElementById('champs1').innerHTML = opt.innerHTML;
}

<select id="opt" onchange="myfunction()">
  <option>One</option>
  <option>Two</option>
</select>
<div id="champs1"></div>

Answer 2

您不能将任何事件绑定到 <option> 元素，而是在 <select> 元素上使用 onchange。 https://www.w3schools.com/jsref/event_onchange.asp

<div class="row">
    <select id="opt" onchange="myfunction()">
        <?php foreach ($page->items as $user): ?>
            <option value="<?php echo $user->getLogin() ?>"><?php echo $user->getLogin() ?></option>
        <?php endforeach; ?>
    </select>
    <h3 id="champs1"></h3>
</div>

<script type="text/javascript">
    function myfunction() {
        // get the selected option value
        const selectedOption = document.getElementById("opt").value

        // display the value to UI
        document.getElementById('champs1').innerHTML = selectedOption
    }
</script>

使用函数 onclick innerhtml

Using function onclick innerhtml

javascript

onclick

innerhtml