Unable to retrive data attribute of selected option in jquery

Question

Below is my html Dom.I want to fetch data attribute of select option.

<table class="fanpage-table">
     <tbody>
        <tr>
            <td>Blog System...</td>
            <td>History......</td>
            <td>
                <select name="brand_dropdown">
                    <option data-brand-id="xxxthisxxxxxxx">PKB</option>
                    <option data-brand-id="xxxthisxxxxxxx">QKJ</option>
                </select>
            </td>
            <td><i class="fa fa-check-square-o save-fan-page" data-fanpage-id="xxxxxxxxxx"></i></td>
        </tr>      
    </tbody>
</table>

To fetch data-brand-id my following JQuery is not working.

$(".save-fan-page").on("click",function() 
{
   $(this).closest("tr").find("select[name='brand_dropdown']option:selected").data("brand-id");
}

Answer 1

$(".save-fan-page").on("click",function() {
  $(this).closest("tr").find("select[name='brand_dropdown'] option:selected").data("brand-id");
 } 

Notice the space between attribute selector for select and option:selected I think that is what the problem is. In your case it is missing .

Answer 2

Try this

$(this).closest("tr").find("select[name='brand_dropdown'] option:selected").data("brand-id");

Give space between select[name='brand_dropdown'] and option:selected