Jquery - how to remove selected on other select

Question

How to remove other checked box every click on my modal this is my html

<div class="form-group">
    <label for="sel1">Select role:</label>
    <select class="form-control" id="role" name="role">
        <option value="admin">Admin</option>
        <option value="user">User</option>
    </select>
</div>

on my javascript

$(document).on('click', '.changeRole', function(){
    var role = "admin" or "user"; //just change test, just nvm of this
    $("#role option[value='"+role+"']").attr('selected', 'selected');
});

cause when I execute two times on it will become like this 2 selected and make error on display

<div class="form-group">
    <label for="sel1">Select role:</label>
    <select class="form-control" id="role" name="role">
        <option value="admin" selected="selected">Admin</option>
        <option value="user" selected="selected">User</option>
    </select>
</div>

Answer 1

Clear all first

$(document).on('click', '.changeRole', function(){
    var role = "admin" or "user"; 

    //clear all first
    $("#role option").removeAttr("selected");

    $("#role option[value='"+role+"']").attr('selected', 'selected');
});