Select last element with specific attribute

Question

I have a select option structure like this

<option value="3" data-type="main"> Main Group 1 </option>
<option value="4" data-type="sub"> Sub Group 1 </option>
<option data-connectionid="1" value="1"> Item 1 </option>
<option value="3" data-type="main">Main Group 2 </option> // i want to get this
<option value="3" data-type="sub">Sub Group 2</option>
<option data-connectionid="2" value="2">Item 2</option>

I want to get the last option with data attribute data-type="main", the options are dynamically generated.

Or if its possible what I want to start loop from the last option with data-type="main" up to the end.

Answer 1

And for jQuery:

$("option[data-type='main']").last();

Answer 2

var el = document.querySelectorAll('select > option[data-type="main"]')
console.log(el[el.length-1].innerHTML)

JSFiddle