javascripthtmljquerycustom-attributesdatalist

How to get custom value from datalist using jquery


Very simple and straight forward. I pre-populated a HTML datalist with values, on the form when I want select the custom value (data-value) and insert it into SQLServer database. This is my example code which is not working. Please help out. HTML5 datalist form creation:
HTML:

 <input id="ocorrenciaSetup" list="ocorrenciasListSetup" name="ocorrenciasListSetup" autocomplete="off">
 <datalist id="ocorrenciasListSetup">
      <option data-value="1.1" data-tipo="1" value="SETUP | [1.1]"></option>
      <option data-value="1.10" data-tipo="1" value="CONSERTO NO CLICHE | [1.10]"></option>
 </datalist>

Jquery:

$('[name=ocorrenciasListSetup]').attr('data-value');

Solution

  • You could something like this in an onclick event:

    var datavalue = $('#ocorrenciasListSetup').find('option[value="' + $('#ocorrenciaSetup').val() + '"]').attr('data-value'));
    

    See working fiddle: https://jsfiddle.net/a1Lpob6q/