使用函数 onclick innerhtml答案

【问题标题】：Using function onclick innerhtml使用函数 onclick innerhtml
【发布时间】：2018-11-09 09:19:36
【问题描述】：

我被一些 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>

【问题讨论】：

标签： javascript onclick innerhtml

【解决方案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>

【讨论】：

@Antoine553 谁说的？它对我有用：jsbin.com/bamutijapa/1/edit?html,output

【解决方案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>

【讨论】：