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