select option dropdown: hide the default value from dropdown options

Question

I have a dropdown which should show a default value of current role of user. And the dropdown shows all roles. If the role is 'admin' I'm seeing admin, admin, user like this:

 <div class="col-md-9">
                  <select>
                    <option>{{data.role}}</option>
                    <option>Admin</option>
                    <option>User</option>
                  </select>
                </div>

How do I work with this to avoid seeing the roles twice?

Answer 1

Try it:

select option:checked {
    display: none;
}