0

I have a calendar with multiple views. I am trying to create a drop-down (other than the one in the ribbon) that can display in or around the web part and allow the user to select and see different views (ie. overlays).

Update: I created a calendar for each of the views, display each on the page as a web part. Then, managed to develop the following code, which seems to work, except that when I make a selection, it does not change the web part.

The intent is to hide all web parts and show only the one selected. Child(1) is the drop down and Child(2) is the web part - I think this may be where it's going wrong?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('div.ms-rtestate-read.ms-rte-wpbox:not(:nth-child(1),:nth-child(2))').hide();
$('option').on('click', function(){
   var target = $(this).attr('rel');
   $("#"+target).show().siblings('div.ms-rtestate-read.ms-rte-wpbox').hide();
});
});</script>
</head>
<body>
<select id="SelectorDropdown"> 
<option a href="#" rel="MSOZoneCell_WebPartWPQ9" class="DDOptions" id="ViewWP1">All Teams</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ3" class="DDOptions" id="ViewWP2">Team 1</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ4" class="DDOptions" id="ViewWP3">Team 2</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ5" class="DDOptions" id="ViewWP4">Team 3</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ6" class="DDOptions" id="ViewWP5">Team 4</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ7" class="DDOptions" id="ViewWP6">Team 5</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ8" class="DDOptions" id="ViewWP7">Team 6</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ10" class="DDOptions" id="ViewWP8">Team 7</option>
<option a href="#" rel="MSOZoneCell_WebPartWPQ11" class="DDOptions" id="ViewWP9">Team 8</option>
</select>
</body>
</html>
1

Try this. rather than on click.

$("#SelectorDropdown").change(function () {
    var target = $(this).attr('rel');
    $("#"+target).show().siblings('div.ms-rtestate-read.ms-rte-wpbox').hide();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.