使用Javascript获取标签中所选选项的值

Question

我在表单中有一个选择元素。
我尝试获取其值，将其粘贴到位于表单另一部分的标签中。

我使用了Javascript片段：

<script>
  $('select[name=auteur]').change(function () {
  var auteur = ($(this).val());
  });
  console.log(auteur) // to check 
  document.getElementById("label-data-aut").innerHTML = auteur;
</script>

我在表单中选择一个选项，然后查看发生了什么。 问题是标签“ label-data-aut”没有得到值。 对于console.log也是如此。
当我将“ console.log”和“ documentgetElementById”放入函数中时，它可以工作，并且标签中填充有选​​择选项。

它如何与放在函数外部的“ documentgetElementById”和“ console.log”一起使用？ 可以修改该摘要以使其起作用吗？

任何帮助将不胜感激。 谢谢 ！

Answer 1

您当前的代码将运行document.getElementById("label-data-aut").innerHTML = auteur; 在处理程序之外。

您可以在change事件处理程序中设置innerHTML。 您可以将代码缩短为：

$('select[name="auteur"]').change(function () {
    document.getElementById("label-data-aut").innerHTML = auteur;
});

如果要设置的标签将由使用document.getElementById“的许多其他调用组成，则可以将变量auteur放置在函数之外：

var auteur = "Initial value";
$('select[name="auteur"]').change(function () {
    document.getElementById("label-data-aut").innerHTML = auteur;
});