Use a drop-down control's onchange event to navigate to pages dyanamically

  • Article

I have seen this come up a few times lately and I feel like I'm just typing the same thing over an over, so I'll post it here. I'm sorry I am being so bad about posting lately, I am going to try to do better.

The goal of this article is to use an XML data source to populate a drop-down control that will take you to some other URL when you change the drop-down controls value. Now, if you are using List Data, you may want to check out my article for breaking up a URL field type. And I am going to post in just a minute or two with instructions for selecting unique values in the drop-down.

  1. Open your page in FrontPage 2003
  2. Data..Insert Data View
  3. Choose your data source, right click > Show Data
  4. Select the fields you want to use in the drop-down
  5. Insert Data View
  6. Data..Style
  7. Change to “Drop-down view style”..OK
  8. Switch to code view
  9. Just before the </head> tag, add this code:

<script language="JavaScript">
<!--
function FP_jumpMenu(el,frm,sel) {//v1.0
var href=el.options[el.selectedIndex].value; if(sel) el.selectedIndex=0;
if('_new'==frm) open(href); else eval(frm+".location='"+href+"'");
}
// -->
</script>

11. FIND: <select name="ID" size="1"
12. Change to: <select name="ID" size="1" onchange="FP_jumpMenu(this,'window',false)">
13. 

FIND: <option style="display:{$GroupStyle}"
14. Change to: <option style="display:{$GroupStyle}" value=”{@FieldWithURL}”> <!--where FieldWIthURL is your field with the URL J -->
15.

Save the page and preview in the browser.