0

I'm making a forms repository site and I've been struggling as I wrangle search and other items to behave as I need them to behave. One of the things I have not been able to accomplish is this:

How do I make a drop down box? My latest attempt was making a list of links. I'd like to add the list as an app part to the main site page, but display as a dropdown box that will send the person to the appropriate library upon selection. Is it possible? How do I accomplish this?

Improve this question

2 Answers 2

Reset to default
1

You can add 'Content Editor' web part to your page, and in page edit view, select that web part and click 'edit HTML' in the ribbon. Then you just simly write html with javascript and css in that webpart :) so you can put <select> tag with <option> inside of it to create a dropdown, and then write javascript or jQuery, to navigate when that dropdown's value changes :) Here's the examples of dropdown in HTML: select example, and here's the example on how to use jQuerys's method .change() on that dropdown: jQuery .change(). Good luck :)

EDIT:

For example add this to content editor webpart's html and see how it works:

<select id="mySelect">
   <option value="-">-</option>
   <option value="http://www.google.com">Google</option>
   <option value="http://www.facebook.com">Facebook</option>
</select>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#mySelect").change(function(){
      if ($(this).val()!='') {
         window.location.href=$(this).val();
      }
   });
});
</script>
Improve this answer
7
  • Thank you so much! This has me in the right direction. Here are two screenshots, the first is of how it looks, and the second is of the code: link link The meny looks right, although I'd prefer to have something other than a dash as the default character. The problem is that when a selection is made, nothing happens. Could you help me in fixing this? I'd greatly appreciate it, and thank you for putting me on the right track.
    – Victor
    Feb 18, 2014 at 14:18
  • Ok, I see that you have put in the html slect into your page, now you need to add jQuery reference and code (the 2nd section of my code from <script> to </script>) at the bottom or at the beginning of page's html and save it :) If it doesn't work, maybe the values you put in select options are wrong, try testing it with like "google.com" or something, if that doesn't work, you can put alert("test"); just before $("#mySelect").change(... in the code, and see if jQuery gets called correctly from it's reference. Let me know how's it going :) Good luck!
    – Gintas K
    Feb 18, 2014 at 14:52
  • Every time I attempt to add the jQuery to the code, SP is deleting it. Is there something I'm missing? SP is also appending all of the select options with unselectable = "on" -- I'm not sure what's that all about either.
    – Victor
    Feb 18, 2014 at 18:39
  • Gintas! Thank you for all your help. This in combination with a user in another forum got me to exactly where I needed to be. You are fantastic!
    – Victor
    Feb 19, 2014 at 13:44
  • 1
    Use Script Editor instead -- that made everything start working perfectly.
    – Victor
    Feb 19, 2014 at 18:12
0

If your main goal is "a dropdown box that will send the person to the appropriate library upon selection" why are you not simply using the built-in navigation?

Configure the QuickLaunch to display flyouts (in your masterpage), add the links to a group header (in site navigation settings), and they will be available on EVERY page.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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