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>

I am having a hard time programmatically setting an item to selected. I have a HTML form which gets a SharePoint List item (JSON). The goal is to make the dropdown option selected as per previously saved...any ideas??

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>