Drop down menu populated with database entries and multiple viewers on one page

Hi there.

Thanks for posting.

I think we can break this down into two main parts.

Part one is getting the maps to display.

Part two is getting the "jump menu" for each map hooked up.

I recommend starting with part one and focusing on getting just the maps to display.  You can simply hardcode a drop down menu into your code for the time being.

Basically, setup this page:

http://strafford.org/maps/standmapsList.html

But don't program the drop downs just yet.

Does that make sense?

Once you get that going, post a copy of your page so I can review the code again. Also, could you attach the file instead of posting your code; it's easier for me to read that way.

Thanks!

Hi Ross, thank you very much for your reply.

Success on part one! I have all the sections reading properly on the Map Index page and all the links connect properly to a Detail page.  I made a simplified version of the page (removing global nav) and it is viewed here 

http://strafford.org/maps/standmapsList.php

and the code is uploaded as an attachment - both as the page above and in a 'simple' version cleaning out scripts, etc.

I am looking forward to learning how to program the dropdowns and the client is excited - many months of work on their part for this.

Best, J

Looking good!

The code you need will end up being pretty much the same for each of the maps.

Let's focus on 2015 Arial to start with.

Keep in mind that with all provided code examples, you may still need to make adjustments to match your own setup.

<select onchange="alert(this.value);">
 <option value="">Select A City</option>
 <?php foreach ($standmaps_2015_aerialRecords as $record): ?>
  <option value="<?php echo htmlencode($record['townaerial15']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>
 <?php endforeach ?>
</select>


This will give you a drop down menu with each city as an option.  When you select a city, the code will

When you select a city, the code will simply alert it on the screen for you for now.

I see that you have a JavaScript function on your page that handles page re-directs and I'll leave it to you to hook that part up.

Give this code a try and let me know how you make out.

Thanks!

Thanks Ross.  

Before I get into the weeds of using javascript for this (my scripts are all related to the menu systems I use), why can't I just use the jumpmenu method similar to that discussed in this post: "A drop-down year list to display different categories books."  http://www.interactivetools.com/forum/forum-posts.php?A-drop-down-year-list-to-display-different-categories-books.-78685

Here is that code from that post...

<form method="get" action="birds_mag_list.php" >
   <?php $options = getListOptions('birds_mag_list', 'list'); ?>
     <select name="list">
       <option value="">&lt;select&gt;</option>
          <option value="">Any</option>
            <?php foreach($options as $value => $label): ?>
          <option value="<?php echo $value; ?>" ><?php echo $label; ?></option>
     <?php endforeach; ?>
    </select>
   <input type="submit" name="go_button" id="go_button" value="Go" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
</form>

best, J

Hi Again,

The client wanted to have the maps page accessible, so I made a new development page here:

http://strafford.org/maps/standmapsListdm.php

The Aerial maps category has a demo jumpmenu /dropmenu.

But to return to my point above, I would like to avoid js/jquery connections and use a form with a jump menu. I think my client's users will be more comfortable with that as well. Is this possible?

I set one up on the development page as below, but I know there is something missing.

<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="" selected>Select</option>

<?php foreach ($standmaps_2015_aerialRecords as $record): ?>
<option value="<?php echo htmlencode($record['townaerial15']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>
<?php endforeach ?>
</select>
<input type="submit" name="go_button" id="go_button" value="Go" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
</form>

thanks, J

Hi there.

A jump menu like that should work.

I won't be able to completely debug it in the forum, but let's have a look anyway.

The first thing I notice, though, is your code is setting the "value" of each option as the name of the city:

<option value="<?php echo htmlencode($record['townaerial15']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>

The code you have to manage this drop down is set to redirect your page to whatever the value of the option selected is.

function MM_jumpMenu(targ,selObj,restore){ 
     //v3.0  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");  
     if (restore) selObj.selectedIndex=0;
}
</script>

What I think you want to do is have the "value" in each option set to the detail page URL like this:

<option value="<?php echo htmlencode($record['_link']) ?>"><?php echo htmlencode($record['townaerial15']) ?></option>

Notice where I put "_link".

You may need to modify this further but that's a start for now.

Let me know any questions.

You bet Ross, I'll wrestle with it and if I'm still stuck I hope I can use the consulting services ;-)

Thanks very much, J