Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

web page drop down question

I would like to create a webpage with 2 drop down boxes.   but the second dropdown box text depends on what is selected in the first box.

doing this with Front Page and it is going to be in a form so something simple would be a great help
0
lefty431
Asked:
lefty431
1 Solution
 
ChadFoldenCommented:
Not sure if you've got this already, but there are a couple of ways to approach the task:

The first way is to have the form submit to itself when the option is changed. When the form submits to itself, the form handler checks for the selection, and reads the next values from a database or wherever. This is actually the easier of the two methods, but more taxing on your web page since it wil resubmit each time.

A second way is to store every option in javascript variables. When a selection is made, a javascript fires that reads the selected value, and loads the next values based on that selection. This is a client-side task is doesn't require a resubmit of your web page.

Another easy way is AJAX, but I'm not sure how you could use this in Frontpage, but if you're adventurous, give that a search on the web .. it's pretty simple in other web publishing tools such as 'visual studio'

I prefer the javascript method, but it requires more coding, but there are plenty of examples out there.
See any of the following:
http://www.js-examples.com/example/?ex=683&mode=2
http://www.plus2net.com/javascript_tutorial/dropdown-code.php
http://www.quirksmode.org/js/options.html
http://codepunk.hardwar.org.uk/ajs22.htm

It should look something like this if it were javascript .. stick it in your page somewhere:
<script language=javascript>
    function DropDwnChgr()
    {
    DDVal=document.getElementById("DD").options[document.getElementById("DD").options.selectedIndex].value;
    DD1=document.getElementById("DD1");
    if(DDVal==0)
        {
            DD1.options[0] = new Option('Choose Option Again','0');
            DD1.options[1] = null;
        }
    if(DDVal==1)
        {
            DD1.options[0] = new Option('Option1Option','value11');
            DD1.options[1] = new Option('Option1Option','value12');
        }
    if(DDVal==2)
        {
            DD1.options[0] = new Option('Option2Option','value21');
            DD1.options[1] = new Option('Option2Option','value22');
        }
    }
</script>

<select name=DD id=DD onchange="DropDwnChgr();">
    <option value=0>Choose Option</option>
    <option value=1>Option1</option>
    <option value=2>Option2</option>
</select>

<select name=DD1 id=DD1>
</select>
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now