Select2 - User menu account switcher

There are a couple of optimisations I'd like to make to the account switcher to make it a little more useful. - Only show account switcher in User menu if the user has access to more than one account. - Display the "role" next to each account in the account switcher - currently either "Owner" or "Collaborator". - Add optgroup titled "Switch to...", containing the accounts. - Add a "View all Accounts" option which goes to /user/collaborations. - Add a "Create New account" option which goes to /accounts/new.

by Girisha Chennura

HTML

<script src="http://ivaynberg.github.com/select2/select2-3.3.1/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.3.1/select2.css">
<select>
    <optgroup label="Switch to&hellip;">
        <option class="owner">Acme Corporation</option>
        <option class="owner">Apple Inc.</option>
        <option class="collaborator">Cloudmailin</option>
        <option>BrightBox (Owner)</option>
    </optgroup>
    <option>View all Accounts</option>
    <option>Create New Account</option>
</select>

CSS

body {
    font: normal 14px/100% arial;
    margin: 50px 0 0 50px;
}

.muted {
    color:#999
}

ul, ol {
    padding: 0;
    margin: 0 0 9px 25px;
}

.select2-container {
    min-width: 275px
}

li.collaborator .select2-result-label:after,
li.owner .select2-result-label:after {
    color: #999;
}

li.owner .select2-result-label:after {
  content: " (Owner)";
}

li.collaborator .select2-result-label:after {
  content: " (Collaborator)";
}

JavaScript

$(document).ready(function() {
    $("select").select2();
});