Skip to content

Instantly share code, notes, and snippets.

@andrewconnell
Last active March 2, 2021 12:21
Show Gist options
  • Save andrewconnell/c21a516f154f17872a7b to your computer and use it in GitHub Desktop.
Save andrewconnell/c21a516f154f17872a7b to your computer and use it in GitHub Desktop.
Office UI Fabric - Sample Dropdown List
<link rel="stylesheet" href="/public/fabric/css/fabric.min.css">
<link rel="stylesheet" href="/public/fabric/css/fabric.components.min.css">
<script src="/public/fabric/components/Dropdown/Jquery.Dropdown.js" type="application/javascript"></script>
<label class="ms-Label">Position</label>
<div class="ms-Dropdown">
<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
<select class="ms-Dropdown-select" data-ng-model="vm.pick.position">
<option value="">Choose a position...</option>
<option value="QB">quarterback</option>
<option value="RB">running back</option>
<option value="WR">wide receiver</option>
<option value="TE">tight end</option>
<option value="K">kicker</option>
<option value="DST">defense / special teams</option>
</select>
</div>
<script lang="application/javascript">
// wire up dropdown controls
$(document).ready(function(){
if ($.fn.Dropdown){
$('.ms-Dropdown').Dropdown();
}
});
</script>
@andrewconnell
Copy link
Author

Fabric is just CSS... the JavaScript they provide is just sample stuff. Recently they switched from JQuery => TypeScript... you'll have to write your own code to figure out how to make all that work.

I don't use Fabric on its own... I use it within an Angular application. If you look at the ngOfficeUIFabric project that I'm invovled in, our dropdown component makes doing stuff like this a lot easier.

@larnera
Copy link

larnera commented Jul 1, 2016

@sharepointoscar There is a .is-selected class in the .msDropdown-items UL. Can you not add that class to your chosen selected option?

Also... I don't know if this helps but i've used jQuery to get the attributes of the dropdown equivalent by using index() and get() and adding a click event to the .ms-Dropdown.

mmEditorApp.directive('displaymegamenu', function () {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            elem.bind('click', function () {
                var dd = $(this).find('.ms-Dropdown-select option');
                var fabSelectedVal = $(this).find('.ms-Dropdown-items .is-selected');
                var pos = fabSelectedVal.index();
                console.log(dd.get(pos));
            })
        }
    }
})

Nice project Andrew. I think I'll definately use that in my next Angular project!

@carruthe
Copy link

carruthe commented Jan 4, 2017

I've been wrestling with this too - So far, the best option I can figure using jQuery (could easily be modified to used vanilla Javascript) is to simulate a click on the new Fabric item:

for example:

        var methodDropdown = document.getElementById("fabric_name_builder_method");
        g_fabricDropdownMethod = new fabric['Dropdown'](methodDropdown);

       // Fabric component trickles down the change event to the original control
        $("#native_name_builder_method").change(onChange_Method);
        
        // This seems to work - kind of hackish....  Obviously, you wouldn't hardcode the dropdown item index.
        $(g_fabricDropdownMethod._dropdownItems[5].newItem).click();

@gitzimm
Copy link

gitzimm commented May 21, 2018

Being a complete untrained hack, I tried the brute-force method of looking through the dom and found that there is a Title element that gets updated with the value of the selected item (at least in all of the 20 times I tested it). To get that, I just navigated the dom to find that element and grabbed the html. I'm sure it is not proper but it worked for me.

Here's a snip of the html and function I built:

            <div id="selectAProp" class="ms-Dropdown" tabindex="0">
                <label class="ms-Label">Select a property</label>
                <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
                <select onchange="changeProps()" class="ms-Dropdown-select">
                    <option>Choose a option&amp;hellip;</option>
                    <option>setShowInNewForm</option>
                    <option>setShowInEditForm</option>
                    <option>setShowInDisplayForm</option>
                    <option>Description</option>
                </select>
            </div>
<script type="text/javascript"> function changeProps() { var selectAProp = document.getElementById("selectAProp").lastElementChild.innerHTML; // Now you just do whatever you needed with the selected value. } </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment