使用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;
});