6 Replies Latest reply: May 2, 2012 7:35 PM by Ben Pleysier RSS

    Dependent dropdown lists in dreamweaver

    sebutler93

      I've been trying to figure this out for hours... im completely new to all this and i have dreamweaver cs5 and microsoft excel.. i dont want to use javascript if that is possible to avoid!! i want it to be something like what is seen in http://labs.adobe.com/technologies/spry/samples/data_region/DataSetMasterDetailSample.html except i have to make it with counties in michigan instead of the state list and the second list would be cities within that specific county that the user selected... please try to explain it as simple as possible!! Thanks

        • 1. Re: Dependent dropdown lists in dreamweaver
          Ben Pleysier CommunityMVP

          Markup by itself will not solve your problem. You will need a scripting language like JavaScript, PHP, Coldfusion or one of the Microsoft languages.

           

          Once you have made up your mind to start using JavaScript, the example that you have quoted is one of the best ways to go.

           

          Gramps

          • 2. Re: Dependent dropdown lists in dreamweaver
            sebutler93 Community Member

            can you look at this code?? somebody posted this on some website to try to help people with these lists.  When i look at the comments for the page i got it from, alot of people are commenting that they are not able to have this code interact with a database. Because what I am trying to do is make a page so that a person chooses a county, then a city, then they submit this information and it is submitted to a database where it will pull up results for houses for sale in that city

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script language="javascript" type="text/javascript">
            function dropdownlist(listindex)
            {

            document.formname.subcategory.options.length = 0;
            switch (listindex)
            {

             

            case "Home Ware" :
            document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
            document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
            document.formname.subcategory.options[2]=new Option("Audio/Video","Audio/Video");
            document.formname.subcategory.options[3]=new Option("Beddings","Beddings");
            document.formname.subcategory.options[4]=new Option("Camera","Camera");
            document.formname.subcategory.options[5]=new Option("Cell Phones","Cell Phones");

             

            break;

             

            case "Education" :
            document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
            document.formname.subcategory.options[1]=new Option("Colleges","Colleges");
            document.formname.subcategory.options[2]=new Option("Institutes","Institutes");
            document.formname.subcategory.options[3]=new Option("Schools","Schools");
            document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");
            document.formname.subcategory.options[5]=new Option("Universities","Universities");

             

            break;

             

            case "Books" :
            document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
            document.formname.subcategory.options[1]=new Option("College Books","College Books");
            document.formname.subcategory.options[2]=new Option("Engineering","Engineering");
            document.formname.subcategory.options[3]=new Option("Magazines","Magazines");
            document.formname.subcategory.options[4]=new Option("Medicine","Medicine");
            document.formname.subcategory.options[5]=new Option("References","References");

             

            break;

             

            }
            return true;
            }
            </script>
            </head>
            <title>Dynamic Drop Down List</title>
            <body>

            <form id="formname" name="formname" method="post" action="submitform.asp" >
            <table width="50%" border="0" cellspacing="0" cellpadding="5">
            <tr>
            <td width="41%" align="right" valign="middle">Category :</td>
            <td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
            <option value="">Select Category</option>
            <option value="Home Ware">Home Ware</option>
            <option value="Education">Education</option>
            <option value="Books">Books</option>
            </select></td>
            </tr>
            <tr>
            <td align="right" valign="middle">Sub Category :
            </td>
            <td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
            document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
            </script>
            <noscript><select name="subcategory" id="subcategory" >
            <option value="">Select Sub-Category</option>
            </select>
            </noscript></td>
            </tr>
            </table>

            </form>

            </body>
            </html>

            • 3. Re: Dependent dropdown lists in dreamweaver
              Ben Pleysier CommunityMVP

              I have translated the above into a Spry application. There is 1 HTML document and 4 XML documents namely:

              1. sample.html
              2. categories.xml
              3. homeware.xml
              4. education.xml
              5. books.xml

               

              The latter 4 can be viewed as a (flat filed) database.

               

              The markup for sample.html:

               

              <!DOCTYPE HTML>
              <html>
              <head>
              <meta charset="utf-8">
              <title>Untitled Document</title>
              <script src="http://labs.adobe.com/technologies/spry/includes_minified/xpath.js"></script>
              <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryData.js"></script>
              <script>
              var dsCategories = new Spry.Data.XMLDataSet("categories.xml", "categories/category");
              var dsSubCategories = new Spry.Data.XMLDataSet("{dsCategories::url}", "category/subcategories/subcategory");
              </script>
              </head>
              
              <body>
              <form name="selectForm" action="">
                  Category:
                  <span spry:region="dsCategories" id="categorySelector">
                      <select spry:repeatchildren="dsCategories" name="categorySelect" onchange="document.forms[0].subcategorySelect.disabled = true; dsCategories.setCurrentRowNumber(this.selectedIndex);">
                          <option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{name}" selected="selected">{name}</option>
                          <option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{name}">{name}</option>
                      </select>
                  </span>
                  Subcategory:
                  <span spry:region="dsSubCategories" id="subcategorySelector">
                      <select spry:repeatchildren="dsSubCategories" id="subcategorySelect" name="subcategorySelect">
                          <option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{name}" selected="selected">{name}</option>
                          <option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{name}">{name}</option>
                      </select>
                  </span>
              </form>
              </body>
              </html>
              

               

              The contents for categories.xml:

               

              <?xml version="1.0" encoding="utf-8"?>
              <categories>
                  <category>
                      <name>Home Ware</name>
                      <url>homeware.xml</url>
                  </category>
                  <category>
                      <name>Education</name>
                      <url>education.xml</url>
                  </category>
                  <category>
                      <name>Books</name>
                      <url>books.xml</url>
                  </category>
              </categories>
              

               

              The contents for homeware.xml:

               

              <?xml version="1.0" encoding="utf-8"?>
              <category>
                  <name>Home Ware</name>
                  <subcategories>
                      <subcategory>
                          <name>Air-Conditioners/Coolers</name>
                      </subcategory>
                      <subcategory>
                          <name>Audio/Video</name>
                      </subcategory>    
                      <subcategory>
                          <name>Beddings</name>
                      </subcategory>    
                      <subcategory>
                          <name>Camera</name>
                      </subcategory>    
                      <subcategory>
                          <name>Cell Phones</name>
                      </subcategory>
                  </subcategories>
              </category>
              

               

              The contents for education.xml:

               

              <?xml version="1.0" encoding="utf-8"?>
              <category>
                  <name>Education</name>
                  <subcategories>
                      <subcategory>
                          <name>Colleges</name>
                      </subcategory>
                      <subcategory>
                          <name>Institutes</name>
                      </subcategory>    
                      <subcategory>
                          <name>Schools</name>
                      </subcategory>    
                      <subcategory>
                          <name>Tuitions</name>
                      </subcategory>    
                      <subcategory>
                          <name>Universities</name>
                      </subcategory>
                  </subcategories>
              </category>
              

               

              The contents for books.xml:

               

              <?xml version="1.0" encoding="utf-8"?>
              <category>
                  <name>Books</name>
                  <subcategories>
                      <subcategory>
                          <name>College Books</name>
                      </subcategory>
                      <subcategory>
                          <name>Engineering</name>
                      </subcategory>    
                      <subcategory>
                          <name>Magazines</name>
                      </subcategory>    
                      <subcategory>
                          <name>Medicine</name>
                      </subcategory>    
                      <subcategory>
                          <name>References</name>
                      </subcategory>
                  </subcategories>
              </category>
              

               

              All you need to do is place 5 new documents in the same folder/directory with the suggested names and copy and paste the above code into each related file. Then view in your favourite browser.

               

              Gramps

              • 4. Re: Dependent dropdown lists in dreamweaver
                sebutler93 Community Member

                Thank you so much!!!! i got it!

                • 5. Re: Dependent dropdown lists in dreamweaver
                  sebutler93 Community Member

                  Just one last question.. So it works when i put it in and click something like multiscreen preview.. however when i press f12 and view it, neither of the two drop down lists appear.. is this just an issue right now and will be resolved when i publish the site??

                   

                  Thanks

                  • 6. Re: Dependent dropdown lists in dreamweaver
                    Ben Pleysier CommunityMVP

                    Barring any typo's it should work wherever. Have a look here http://pleysier.com.au/butler/

                     

                    Once on the page, right click the page and click View Source or similar to see the source code.

                     

                    Gramps