CODEWITHSUNDEEP
javascriptjquery
Jack
Jack

Reputation: 941

Javascript get data attribute from selected option in a table

I got the following html:

<td class="" data-id="46" contenteditable="true">
<select class="form-control">
   <option data-key="end" selected>Opt1</option>
   <option data-key="operator_transfer">Opt2</option>
   <option data-key="process_script">Opt3</option>
</select>
</td>

I need to get data attribute of the selected option. I am trying to do it that way:

var cell = $row.find(':nth-child(4)');
dataattr = cell[0].getAttribute('data-id');
var selectObject = cell.find("select");
if(selectObject.length){// if it is a select
    localobj[dataattr] = selectObject[0].getAttribute('data-key');//val(); previously it was val() here but now I want data-key
}

I tried with this:

$(selectObject/*need to insert something here*/ + ' option:selected').data('key');

but it is showing me an error saying that it is an object Object. I need to insert something after selectObject. Any ideas how to fix that?

Thank you.

Upvotes: 1

Views: 2946

Answers (3)

cнŝdk
cнŝdk

Reputation: 32145

You just need to use the jQuery data() method with the right selector, like this:

$('select option:selected').data('key');

Demo:

var key = $('select option:selected').data('key');
console.log(key);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
   <option data-key="end" selected>Opt1</option>
   <option data-key="operator_transfer">Opt2</option>
   <option data-key="process_script">Opt3</option>
</select>
</td>

And you can update your code like this:

if (selectObject.length) { // if it is a select
  localobj[dataattr] = selectObject[0].getAttribute('data-key');
}
$(selectObject).find('option:selected').data('key');

Upvotes: 0

prasanth
prasanth

Reputation: 22490

Try this $('.form-control').children('option:selected').attr('data-key') using jquery function attr()

console.log($('.form-control').children('option:selected').attr('data-key'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
   <option data-key="end" selected>Opt1</option>
   <option data-key="operator_transfer">Opt2</option>
   <option data-key="process_script">Opt3</option>
</select>
</td>

For your code you could do like this 

var cell = $row.find(':nth-child(4)');
dataattr = cell[0].getAttribute('data-id');
var selectObject = cell.find("select");
if(selectObject.length){// if it is a select
    localobj[dataattr] = selectObject[0].getAttribute('data-key');
}
$(selectObject).children('option:selected').data('key');

Upvotes: 2

PRATAP ODEDRA
PRATAP ODEDRA

Reputation: 41

$('.form-control').change(function(){
alert($('.form-control').find(':selected').attr('data-key'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="" data-id="46" contenteditable="true">
<select class="form-control">
   <option data-key="end" selected>Opt1</option>
   <option data-key="operator_transfer">Opt2</option>
   <option data-key="process_script">Opt3</option>
</select>
</td>

Upvotes: 0

Related Questions