Skip to content

Instantly share code, notes, and snippets.

@PatD

PatD/Dropdown_Multi_Query_String_Values.html

Last active February 26, 2020 12:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PatD/54ebcf6da89c0be299cf785ee078b259 to your computer and use it in GitHub Desktop.
Save PatD/54ebcf6da89c0be299cf785ee078b259 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Dropdown_Multi_Query_String_Values.html
<html>
<body>
<style>
#bikePedDropDowns select{width:99%}
/* #bikePedDropDowns .col20{width:18%} */
@media only screen and (min-width: 960px){
#bikePedDropDowns .col20 {
width: 18%;
}
}
#resetButton{
display: block;
float: right;
padding: 0;
margin-top: 7px;
margin-right: 15px;
text-decoration: underline;
font-size: 90%;
color:#666;}
</style>
<div id="bikePedDropDowns">
<p><em>Use these dropdowns to filter the project listing below.</em></p>
<div class="panel col20">
<select id="selectorDivision">
<option value="">All Divisions</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
<div class="panel col20">
<select id="selectorCounty">
<option value="">All Counties</option>
<option value="Alamance">Alamance</option>
<option value="Alexander">Alexander</option>
<option value="Alleghany">Alleghany</option>
<option value="Anson">Anson</option>
<option value="Ashe">Ashe</option>
<option value="Avery">Avery</option>
<option value="Beaufort">Beaufort</option>
<option value="Bertie">Bertie</option>
<option value="Bladen">Bladen</option>
<option value="Brunswick">Brunswick</option>
<option value="Buncombe">Buncombe</option>
<option value="Burke">Burke</option>
<option value="Cabarrus">Cabarrus</option>
<option value="Caldwell">Caldwell</option>
<option value="Camden">Camden</option>
<option value="Carteret">Carteret</option>
<option value="Caswell">Caswell</option>
<option value="Catawba">Catawba</option>
<option value="Chatham">Chatham</option>
<option value="Cherokee">Cherokee</option>
<option value="Chowan">Chowan</option>
<option value="Clay">Clay</option>
<option value="Cleveland">Cleveland</option>
<option value="Columbus">Columbus</option>
<option value="Craven">Craven</option>
<option value="Cumberland">Cumberland</option>
<option value="Currituck">Currituck</option>
<option value="Dare">Dare</option>
<option value="Davidson">Davidson</option>
<option value="Davie">Davie</option>
<option value="Duplin">Duplin</option>
<option value="Durham">Durham</option>
<option value="Edgecombe">Edgecombe</option>
<option value="Forsyth">Forsyth</option>
<option value="Franklin">Franklin</option>
<option value="Gaston">Gaston</option>
<option value="Gates">Gates</option>
<option value="Graham">Graham</option>
<option value="Granville">Granville</option>
<option value="Greene">Greene</option>
<option value="Guilford">Guilford</option>
<option value="Halifax">Halifax</option>
<option value="Harnett">Harnett</option>
<option value="Haywood">Haywood</option>
<option value="Henderson">Henderson</option>
<option value="Hertford">Hertford</option>
<option value="Hoke">Hoke</option>
<option value="Hyde">Hyde</option>
<option value="Iredell">Iredell</option>
<option value="Jackson">Jackson</option>
<option value="Johnston">Johnston</option>
<option value="Jones">Jones</option>
<option value="Lee">Lee</option>
<option value="Lenoir">Lenoir</option>
<option value="Lincoln">Lincoln</option>
<option value="Macon">Macon</option>
<option value="Madison">Madison</option>
<option value="Martin">Martin</option>
<option value="McDowell">McDowell</option>
<option value="Mecklenburg">Mecklenburg</option>
<option value="Mitchell">Mitchell</option>
<option value="Montgomery">Montgomery</option>
<option value="Moore">Moore</option>
<option value="Nash">Nash</option>
<option value="New Hanover">New Hanover</option>
<option value="Northampton">Northampton</option>
<option value="Onslow">Onslow</option>
<option value="Orange">Orange</option>
<option value="Pamlico">Pamlico</option>
<option value="Pasquotank">Pasquotank</option>
<option value="Pender">Pender</option>
<option value="Perquimans">Perquimans</option>
<option value="Person">Person</option>
<option value="Pitt">Pitt</option>
<option value="Polk">Polk</option>
<option value="Randolph">Randolph</option>
<option value="Richmond">Richmond</option>
<option value="Robeson">Robeson</option>
<option value="Rockingham">Rockingham</option>
<option value="Rowan">Rowan</option>
<option value="Rutherford">Rutherford</option>
<option value="Sampson">Sampson</option>
<option value="Scotland">Scotland</option>
<option value="Stanly">Stanly</option>
<option value="Stokes">Stokes</option>
<option value="Surry">Surry</option>
<option value="Swain">Swain</option>
<option value="Transylvania">Transylvania</option>
<option value="Tyrrell">Tyrrell</option>
<option value="Union">Union</option>
<option value="Vance">Vance</option>
<option value="Wake">Wake</option>
<option value="Warren">Warren</option>
<option value="Washington">Washington</option>
<option value="Watauga">Watauga</option>
<option value="Wayne">Wayne</option>
<option value="Wilkes">Wilkes</option>
<option value="Wilson">Wilson</option>
<option value="Yadkin">Yadkin</option>
<option value="Yancey">Yancey</option>
</select>
</div>
<div class="panel col20">
<select id="selectorJurisdiction" disabled="true">
<option value="">All Jurisdictions</option>
</select>
</div>
<div class="panel col20">
<select id="selectorYear">
<option value="">All Years</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2019">2020</option>
</select>
</div>
<div class="panel col20 last">
<select id="selectorProjectType">
<option value="">All Types</option>
<option value="Sidewalk">Sidewalk</option>
<option value="Bike Lanes">Bike Lanes</option>
<option value="Multi-Use Path">Multi-Use Path</option>
<option value="Crosswalk">Crosswalk</option>
<option value="Other">Other</option>
</select>
</div>
<div class="">
<button id="applyFilter" class="important">Filter Data</button>
</div>
<a href="#" id="resetButton">Reset Filters</a>
</div>
<script src="https://connect.ncdot.gov/Style%20Library/js/sharepointplus.js"></script>
<script>
// gets URL Values. Expects a parameter to be passed to it.
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
// Function to change dropdown selector value.
// Expects the ID of the select element and the value to selected.
function selectElement(id, valueToSelect) {
id.value = valueToSelect;
}
// selectors for dropdowns
var selectorDivision = document.getElementById('selectorDivision'),
selectorCounty = document.getElementById('selectorCounty'),
selectorJurisdiction = document.getElementById('selectorJurisdiction'),
selectorYear = document.getElementById('selectorYear'),
selectorProjectType = document.getElementById('selectorProjectType');
// selectors for buttons
var applyFilter = document.getElementById('applyFilter'),
resetButton = document.getElementById('resetButton');
// value of query strings on page load
var _loadedDivision = getUrlParameter('division'),
_loadedCounty = getUrlParameter('county'),
_loadedJurisdiction = getUrlParameter('jurisdiction'),
_loadedYear = getUrlParameter('year'),
_loadedProjectType = getUrlParameter('projecttype');
// Build dropdown for Jurisdictions.
// Expects an array of locations to be passed to it
function buildJurisdictionDropdown(jurs){
jurs.forEach(function(jurisdiction){
var opt = document.createElement('option');
opt.value = jurisdiction;
opt.innerHTML = jurisdiction;
selectorJurisdiction.appendChild(opt);
});
// Enable dropdown now that it's populated
selectorJurisdiction.disabled = false;
// Now read the query string and add that value
if (_loadedJurisdiction !== "") {
selectElement(selectorJurisdiction, _loadedJurisdiction)
}
};
// Query for list of Jurisdictions
$SP().list('Bicycle Pedestrian').get({fields:"Jurisdiction"}).then(function(data) {
var _jurisdictions = [];
data.forEach(function(d) {
var _jurisdiction = d.getAttribute("Jurisdiction");
// Adds a jurisdiction to the array
// but checks and only adds it if it isn't already in the array
if(_jurisdictions.indexOf(_jurisdiction) === -1) {
_jurisdictions.push(_jurisdiction);
}
})
return buildJurisdictionDropdown(_jurisdictions.sort());
});
// On load, get values of query string parameters (if any)
// ... and set dropdowns to match!
if (_loadedDivision !== "") {
selectElement(selectorDivision, _loadedDivision)
}
if (_loadedCounty !== "") {
selectElement(selectorCounty, _loadedCounty)
}
// if (_loadedJurisdiction !== "") {
// selectElement(selectorJurisdiction, _loadedJurisdiction)
// }
if (_loadedYear !== "") {
selectElement(selectorYear, _loadedYear)
}
if (_loadedProjectType !== "") {
selectElement(selectorProjectType, _loadedProjectType)
}
// When the Apply button is clicked, grab values currently selected option tags, merge into a query string, and reload!
function buildQueryString(){
/* False query strings for unselected dropdowns */
var _currentDivision = "&alldivisions",
_currentCounty= "&allcountys",
_currentJurisdiction= "&alljurisdictions",
_currentYear = "&allyears",
_currentProjectType = "&allprojects";
/* real query string values if user has made selection */
if(selectorDivision.value != ""){
var _currentDivision = "&division=" + selectorDivision.value;
}
if(selectorCounty.value != ""){
var _currentCounty = "&county=" + selectorCounty.value;
}
if(selectorJurisdiction.value != ""){
var _currentJurisdiction = "&jurisdiction=" + selectorJurisdiction.value;
}
if(selectorYear.value != ""){
var _currentYear = "&year=" + selectorYear.value;
}
if(selectorProjectType.value !=""){
var _currentProjectType = "&projecttype=" + selectorProjectType.value;
}
// Build a query string string (from strings)
_newQueryText = "?=bp" + _currentCounty + _currentDivision + _currentJurisdiction + _currentProjectType + _currentYear;
// Reload the page with query string values!
window.location.href = window.location.pathname + _newQueryText
};
// Green Filter button
applyFilter.addEventListener("click", function(event) {
buildQueryString();
event.preventDefault();
}, false);
// Reset button
resetButton.addEventListener("click", function(event) {
window.location = window.location.pathname
event.preventDefault();
}, false);
// Fix county columns, where SharePoint doesn't add spaces after commas
SP.SOD.executeOrDelayUntilEventNotified(function () {
var _countyColumnsSplit = document.querySelectorAll("tr td.ms-cellstyle:nth-child(4)");
for (var i = 0; i < _countyColumnsSplit.length; i++) {
var _countySplit = _countyColumnsSplit[i].innerHTML;
var _countySplitReplace = _countySplit.replace(/,/g, ', ')
_countyColumnsSplit[i].innerHTML = _countySplitReplace
}
}, "sp.bodyloaded");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment