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。
click没有<option>事件。您应该为change使用<select>事件。

以下可能有效。

<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>元素，而应在onchange元素上使用<select>。 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

2 个答案: