Comment trouver l'attribut personnalisé de l'option sélectionnée dans datalist en utilisant JQuery ou JavaScript

Question

En utilisant jQuery, je peux accéder aux val() de mes datalistes, mais je veux accéder à l'option selectedHTML (html()). Lorsque j'utilise le code suivant, cela ne fonctionne pas. Comment puis-je trouver ma valeur?

$("input[name=browsers]").on('change', function() { 
 
    alert($(this).html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input list="browsers" name="browsers" /> 
 
<datalist id="browsers"> 
 
    <option value="IE">5</option> 
 
    <option value="Firefox">6</option> 
 
    <option value="Chrome">7</option> 
 
    <option value="Opera">8</option> 
 
    <option value="Safari">9</option> 
 
</datalist>

Answer 1

vous êtes juste alertent la valeur de votre entrée, pas la html de votre option sélectionnée.

Pour obtenir le l'option, vous pouvez l'obtenir en utilisant la valeur de votre entrée, puis faire pour corriger sélecteur comme ceci:

$("input[name=browsers]").on('change', function(){ 
 
    var inputVal = $(this).val(); 
 
    var optionHTML = $("#browsers option[value='"+inputVal+"']").html(); 
 
    alert(optionHTML); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input list="browsers" name="browsers" /> 
 
<datalist id="browsers"> 
 
    <option value="IE">5</option> 
 
    <option value="Firefox">6</option> 
 
    <option value="Chrome">7</option> 
 
    <option value="Opera">8</option> 
 
    <option value="Safari">9</option> 
 
</datalist>