Je dois obtenir l'identifiant de l'option sélectionnée.

De cette façon retourne toujours le premier identifiant, il retourne "1" :

function myFunction() {
  var skills = document.getElementById('toto');
  var skillId = skills.getAttribute('data-id');
  console.log(skillId);
}
<label>
    Skills :
    <input id="inputTest" name='skill' list='skills'>
        <datalist id='skills'>
            <select> 
                 <option id="toto" data-id="1">HTML</option>
                 <option id="toto" data-id="2">Jquery</option>
                 <option id="toto" data-id="3">CSS</option>
            </select>
        </datalist>
    </label>

<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>

Cette méthode ne fonctionne pas, elle renvoie "null":

<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
    <datalist id='skills'>
        <select>
         <div id="toto">
            <option data-id="1">HTML</option>
            <option data-id="2">Jquery</option>
            <option data-id="3">CSS</option>
         </div>
        </select>
    </datalist>
</label>

<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>

<script>
    function myFunction(){
    var skills = document.getElementById('toto');
    var skillId = skills.getAttribute('data-id');
    console.log(skillId); 
    }
</script>

La méthode suivante ne fonctionne pas non plus :

...
<datalist id='skills'>
...
    <script>
        function myFunction(){
        var skills = document.getElementById('skills');
        var skillId = skills.getAttribute('data-id');
        console.log(skillId); 
        }
    </script>

Et si je mets l'identifiant sur le , cela ne fonctionne pas non plus.

La méthode getAttribute() est forcément dans la même <div></div> que la méthode getElementById() ?

Je veux juste comprendre le bon fonctionnement..

Y a-t-il une autre façon de faire ça sans datalist ? Parce que "la balise datalist n'est pas prise en charge dans Internet Explorer 9 et les versions antérieures, ni dans Safari".

Merci beaucoup :)

0
Simon Delaunay 17 mars 2019 à 18:01

2 réponses

Meilleure réponse

Vous pouvez utiliser filter() et map() pour obtenir l'option en faisant correspondre le texte :

function myFunction(){
  var skills = document.getElementById('inputTest');
  var allOption = [].slice.call(document.querySelectorAll('#skills option'));
  var selected = allOption.filter(o => o.textContent == skills.value).map(el => el.getAttribute('data-id'))[0];
  console.log(selected); 
}
<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
    <datalist id='skills'>
        <option data-id="1">HTML</option>
        <option data-id="2">Jquery</option>
        <option data-id="3">CSS</option>
    </datalist>
</label>

<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>
3
Mamun 17 mars 2019 à 15:29

@Mamun, ça marche comme un charme, d'ailleurs j'ai trouvé un autre moyen de le faire avec Jquery :

$(document).ready(function() {
    $('#button1').click(function()
    {
        var value = $('#inputTest').val();
        console.log(($('#skills [value="' + value + '"]').data('value')));
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
    <datalist id='skills'>
        <option value="HTML" data-value="1"></option>
        <option value="CSS" data-value="2"></option>
        <option value="Jquery" data-value="3"></option>
        <option value="Java" data-value="4"></option>
    </datalist>
</label>

<button type="button" id="button1"> Clickhere </button>

J'espère que ça t'aidera aussi.

1
Simon Delaunay 17 mars 2019 à 16:07