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.

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

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.

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();

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!

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