I have a HTML form, and I need to read the option values with javasript. So when I have this :
<select class="login-input" name="Provenance" id="Provenance">
<option value="">--- Provenance ---</option>
<option value="N">Collection </option>
<option value="P" data1="P">Prévente</option>
</select>
It works fine with :
document.getElementById('Provenance').value
But when I add a custom variable modelcode I don't know how to get the value :
<select class="login-input" name="Modeles" id="Modeles">
<option value="">--- Code modele ---</option>
<option value="00" modelcode="A">A</option>
<option value="01" modelcode="B">B</option>
<option value="03" modelcode="C">C</option>
</select>
I would like to read the modelcode value.
Any ideas ? Thanks
In HTML5, you can use data- attributes to store data into your attributes, as an example:
window.onload = () => {
const select = document.getElementById('modeles')
select.addEventListener('change', onModelChange, true)
}
function onModelChange(event) {
if (event.target.value) {
const { value, options } = event.target
console.log({
value,
...options[options.selectedIndex].dataset
})
} else {
console.log('no selection')
}
}<select name="modeles" id="modeles">
<option value="">--- Code modele ---</option>
<option value="00" data-modelcode="A">A</option>
<option value="01" data-modelcode="B">B</option>
<option value="02" data-modelcode="C">C</option>
<option value="03" data-modelcode="D">D</option>
</select>This is the concept, in order to familiarize, you can read more: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes