Get value from data-attribute of selected dropdown

I’m trying to select the data attribute from the selected option of a drop-down list then place it within a textbox. This is also my second data attribute. I’m going to add code for whenever the user changes the option (code I already have written and can abstract here), but I want to get this part to work first.

HTML

<select class="operations-supplier" name="operations-supplier">
    <option data-selected="latam" data-capacity="100000" value="
        10">LATAM - Supplier A</option>
    <option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
    <option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input type="text" class="operations-supplierCapacity" readonly />

JQuery

var capacityValue = $('select.operations-supplier').find(':selected').attr('data-capacity').val();
$('.operations-supplierCapacity').val(capacityValue);

Jsfiddle

You can use data() method in jQuery , Also add a change event for dropdown

$(document).ready(function() {
    $('select.operations-supplier').change(function() {
        var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
        $('.operations-supplierCapacity').val(capacityValue);
    });
});

FIDDLE

You need to wrap code within $(document).ready(function() {...}); , to bind event after dom element is loaded.

http://jsfiddle.net/X4JvA/1/

$('.operations-supplier').change(function(){
   $('.operations-supplierCapacity').val($('.operations-supplier option:selected').attr('data-capacity'))
   //alert($('.operations-supplier option:selected').attr('data-selected'))
})

In pure vanilla javascript you can use :

   var supplierCapacity = this.selectedOptions[0].getAttribute('data-capacity'));

Example:

function OnSelectChange(event) {
    document.getElementById('supplierCapacity').value = event.selectedOptions[0].getAttribute('data-capacity'); 
}
<select onchange="OnSelectChange(this)" class="operations-supplier" name="operations-supplier">
<option data-selected="latam" data-capacity="100000" value="10">LATAM - Supplier A</option>
<option data-selected="na" data-capacity="200000" value="20>">NA - Supplier B</option>
<option data-selected="asia" data-capacity="300000" value="30">ASIA - Supplier C</option>
</select>
<input id="supplierCapacity" type="text" class="operations-supplierCapacity" readonly />

A data attribute isn’t an input, and you don’t need to call .val() on it.

The following will work just fine:

var capacityValue = $('select.operations-supplier').find(':selected').attr('data-capacity');
$('.operations-supplierCapacity').val(capacityValue);

You can get data using .data() function as follows:

$('select.operations-supplier').on('change', function() {
    var capacityValue = $('select.operations-supplier').find(':selected').data('capacity');
    $('.operations-supplierCapacity').val(capacityValue);
});

Another vanilla javascript modern approach using .find():

document.querySelector(".operations-supplier").addEventListener("change", e => {
  const result = Array.from(e.target.children)
    .find(option => option.value === e.target.value)
    .getAttribute("data-capacity");

  // do what you will with the result
  console.log(result);

  document.querySelector(".operations-supplierCapacity").value = result;
});


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   What does the "$" sign mean in jQuery or JavaScript? [duplicate]

Similar Posts