Question

86

Get value from data-attribute of selected dropdown

rated 0 times [ 87] [ 1] / answers: 1 / hits: 87712 / 11 Years ago, tue, january 14, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

xiomara

Add To Favorites

Follow

Total Points: 378

Total Questions: 90

Total Answers: 104

Location: Guernsey

Member since Thu, Oct 7, 2021

3 Years ago

answered 11 Years ago zariahdiamondz · Accepted Answer

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.