javascript - 如何在另一个位置的选择菜单中显示选项标题

Question

我正在尝试从“选择”菜单中选定的选项获取标题属性。我已经为此花费了一天多的时间，正在寻求帮助。我找到了几种使用 value 属性的方法，但现在我需要在页面的其他位置使用 title 属性。

这是我当前的尝试，尽管我已经经历了多次迭代。我列出了两种可能的脚本，尽管最终只会使用一种。第一个可能的脚本可能包含 Jquery，如果它包含并且可以在这里使用，你能将它翻译成 Javascript，因为我也不擅长？我的元素顺序正确吗？

<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option> 
  <option value="0" title="None">0</option>
  <option value="1" title="One Quarter">1/4</option>
  <option value="2" title="One Half">1/2</option>
  <option value="3" title="Three Quarters">3/4</option>
  <option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
    $(document).on('click','#amount_id',function(){
       var result = $("option:selected",this).attr('title');
       $("#displayTitle").text(result);
    });
});
</script>

或者

<script>
function run(){
  document.getElementById("displayTitle").value = 
document.getElementById("amount_id").value;}
</script>

谢谢。

Answer 1

这是第一个代码的 JavaScript 替代方案:

<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option> 
  <option value="0" title="None">0</option>
  <option value="1" title="One Quarter">1/4</option>
  <option value="2" title="One Half">1/2</option>
  <option value="3" title="Three Quarters">3/4</option>
  <option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
  document.getElementById("amount_id").addEventListener('change',function(){
     var eTitle = this.options[this.selectedIndex].getAttribute('title');
     document.getElementById("displayTitle").value = eTitle;
  });
</script>