Comment afficher le titre de l'option à partir d'un autre menu?

Question

J'essaie d'obtenir l'attribut title d'une option sélectionnée dans un menu Select. J'ai passé plus d'une journée à ce sujet et je cherche de l'aide. J'ai trouvé quelques façons d'utiliser l'attribut value mais maintenant je dois utiliser l'attribut title ailleurs sur la page.

Voici ma tentative actuelle bien que j'ai traversé de nombreuses itérations. J'ai énuméré deux scénarios possibles, mais un seul sera éventuellement utilisé. Le premier script possible pourrait inclure Jquery et si c'est le cas et qu'il peut être utilisé ici, pouvez-vous le traduire en Javascript, car je ne suis pas bon non plus? Est-ce que j'ai les éléments dans le bon ordre?

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

OU

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

Merci.

Answer 1

Voici une alternative JavaScript du premier 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>