Javascript get data attribute from selected option in a table

Question

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.

Answer 1

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');

Answer 2

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');

Answer 3

 $('.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>