如何从另一个位置的选择菜单显示选项标题

Question

I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.

Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?

<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>

OR

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

Thank you.

Answer 1

Here is a JavaScript alternative of the first code :

 <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>