Everyone is trying to help you. You have to see it from the other side. You have given contradictory requirements (static HTML but dynamic content and no Ajax but with Perl) and no sample code. This is also a messy problemspace with many avenues of attack. Frankly, this is the kind of thing that gets easy only after you've banged your head on your keyboard for months. E.g., it took me twice as long to write up this node as it did to write the jQuery. I can easily see this problem eating up a week of time or more for a new developer. Don't despair though. Pick stuff that's fun and you'll often enjoy the keyboard pattern printed on your forehead.

Here's demo of an approach that might fit part of what you're after. This is pure HTML and jQuery. It would be easy for someone who knows a JS toolkit and Perl to wire in the server side stuff to make it dynamic (Ajax).

<?xml version="1.0" encoding="UTF-8"?> <!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" lang="en-US" xml:lang="en-US"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Some auto-populate stuff</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery. +js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ jQuery(function($){ $("#something").bind("change", function(){ var city = $(this).find(":selected").text(); var index = $(this).val(); var option = $("<option value='" + index + "'>A market in " + city + "</option>"); $("#else").children(":gt(0)").remove().end() .fadeIn("slow") .append(option); }); }); //]]> </script> </head> <body> <select name="something" id="something"> <option value="0">&lt;choose city&gt;</option> <option value="1">Alburquerque</option> <option value="2">Mongoton</option> <option value="3">Zipperville</option> </select> <select name="else" id="else" style="display:none"> <option value="0">&lt;choose market&gt;</option> </select> </body> </html>

Give that a spin. jQuery is, to me, a lot like Perl. A bit inscrutable at first but then a heavenly match between problems and the way problems are really solved (in human minds).

Sidebar: Perl and Ajax are generally written titlecased, not in all caps.


In reply to Re^7: Dynamic Drop down in CGI by Your Mother
in thread Dynamic Drop down in CGI by d0353101

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.