Office UI Fabric - Sample Dropdown List

office-ui-fabric-dropdown.html

<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>

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.

@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!

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();

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>