Jump to:

23491 Posts in 18996 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » [Solved] Selecting a specific dropdown item dynamically

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3672 Views
  • Shauna G
    Avatar
    Community Member
    52 Posts

    [Solved] Selecting a specific dropdown item dynamically Link to this post

    I don't really know where to put this question, as the DropDown list is technically a form element (and the actual code I used on the static site functions like a form), but it's not really a form in the sense of the Contact Form or whatever. If a mod thinks this would be better suited in the Forms forum, then by all means, feel free to move it.

    Anywho, I have a DropDown Field that I'm using as navigation (I know, I know, not best practice, not accessible; not my idea and I don't like doing it, but my client and my boss want it that way). What I'd like to do with it, is set a given list item (the one that reflects the current page) as the "selected" one after the new page loads.

    I've tried using Javascript to set the selection, but it breaks the whole redirect script (it won't go to the selected page). So, what I need is either a way to get it to work with Javascript, or have a way for either PHP or a SilverStripe function to set the selected item on page load. The field itself is currently in the template, but I can move it into the PHP if needed.

  • patjnr
    Avatar
    Community Member
    101 Posts

    Re: [Solved] Selecting a specific dropdown item dynamically Link to this post

    HI

    can u paste a sample of your code.

    if you drop down is in the template you can do it this way.
    i did it once with translations

    <form name="form2">
    <select name="select" >
    <% control Translations %>
    <option<% if current %>selected<% end_if %> VALUE="$link"><% sprintf(_t('SHOWINPAGE',' %s'),$name) %></option>
    <% end_control %>
    </select >
    </form >

    ta

    P

  • Shauna G
    Avatar
    Community Member
    52 Posts

    Re: [Solved] Selecting a specific dropdown item dynamically Link to this post

    Okay, so now that I have fresh eyes, I've figured out why adding the selection script was breaking the whole thing (go go stupid errors from fatigue). However, I still haven't gotten the selection script itself to work.

    Selection script:

    function selectItem()
    {

    selectitem = location.pathname ;

    document.getElementById(selectitem).selected = true;
    }

    Template code:

    <form name="filterNav" method="post">
       Filter
       <select name="newurl" onchange="menuGoto(this.form)" id="filter">
       <option id="filterBy" value="filterBy">Filter</option>
       <option id="floor-plans" value="floor-plans">All</option>
       <option id="ranch-homes" value="ranch-homes">Ranch Homes</option>
       <option id="traditional" value="traditional">Two Story - Traditional</option>
       <option id="first-floor" value="first-floor">Two Story - First Floor Master</option>
       <option id="multi-level" value="multi-level">Two Story - Multi-Level Split</option>
       </select>

             </form>

    The option IDs match the URLSegment and are only needed for those select few links, which I've understood location.pathname to work out to in the SS environment (since there's no nesting). I will eventually be phasing this system out of the site I'm working on, but need to get it working like the current, static one as soon as I can, which means this system until I can buy some more time to do a properly filtering page.

    I'm no expert in JavaScript, by any means, so I'm probably missing something stupid for activating it on load.

    Also, could you point me to some good information about creating custom controls? The documentation is nonexistent in that area that I've found (the Wiki entry for it is empty completely), and my Google-fu has been failing me.

  • Devlin
    Avatar
    Community Member
    215 Posts

    Re: [Solved] Selecting a specific dropdown item dynamically Link to this post

    Some dirty coding for the evening, well I hope that it will help.

    <form name="filterNav" method="post">
    Filter
    <select name="newurl" onchange="menuGoto(this)" id="filter">
    <option id="filterBy" value="filterBy">Filter</option>
    <option id="floor-plans" value="floor-plans">All</option>
    <option id="ranch-homes" value="ranch-homes">Ranch Homes</option>
    <option id="traditional" value="traditional">Two Story - Traditional</option>
    <option id="first-floor" value="first-floor">Two Story - First Floor Master</option>
    <option id="multi-level" value="multi-level">Two Story - Multi-Level Split</option>
    </select>
    </form>

    function menuGoto(selectbox) {
    window.location.href = selectbox.value+"/";
    }
    function selectItem() {
    var pathName = location.pathname;
    var pathArray = pathName.split('/');
    var selectItem = pathArray[pathArray.length-2];
    if( selectItem!="" && document.getElementById(selectItem) ) {
    document.getElementById(selectItem).selected = true;
    }
    }
    document.body.onload = selectItem();

  • Shauna G
    Avatar
    Community Member
    52 Posts

    Re: [Solved] Selecting a specific dropdown item dynamically Link to this post

    Thanks for the help!

    It took a little bit of playing with to get it working (primarily because I forgot I turned off write_javascript_to_body), but your solution worked!

  • patjnr
    Avatar
    Community Member
    101 Posts

    Re: [Solved] Selecting a specific dropdown item dynamically Link to this post

    Hi

    Great it worked!
    i think it will be good if you try to build your menu links dynamically like this

    <Script language="JavaScript">
          
          function goto(form) { var index=form.select.selectedIndex
          if (form.select.options[index].value != "") {
          location=form.select.options[index].value;}}
          
       </Script>

    <form name="form2">
    <select name="select" onchange="goto(this.form)" SIZE="1" class="smallText" style="text-transform:capitalize;">
    <% control Menu (1) %>
    <option <% if current %>selected<% end_if %> value="$link"><% sprintf(_t('SHOWINPAGE',' %s'),$MenuTilte) %></option>
    <% end_control %>
    </select>
    </form >

    ta

    Enjoy SS

    P

    3672 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.