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

Question

我正在尝试从 Select 菜单中的选定选项获取标题属性。我已经在这上面花了一天多的时间，我正在寻求帮助。我找到了几种使用 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>

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

How do I show option title from select menu in another spot

javascript

attributes

title

option