title: Two html objects (list, input) should generate a third list
body: <p>I edited my question and started afresh.</p>
  
  <p>I have a html form which contains 2 dropdown lists (#selProvincie, #selRegiune). when a new option from List1 is selected by user, List2 must change accordingly. The lists are generated thru PHP from MySQL querying two tables that have a foreign key relationship (this code is not shown for brevity).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="input_frm"&gt;
   &lt;form method="post" action="&lt;?php print data_clean($_SERVER["PHP_SELF"]);?&gt;"&gt;
  &lt;table class="input_tbl"&gt;
     &lt;tr&gt;
        &lt;td class="a"&gt;Select province&lt;/td&gt;
        &lt;td class="b"&gt;&lt;select id="selProvincie" name="Alfa" onchange="provincieChg()"&gt;&lt;/select&gt;&lt;/td&gt;
        &lt;td class="c"&gt;&lt;input class="button_face" type="submit" value="Submit"&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td class="a"&gt;Select region&lt;/td&gt;
        &lt;td class="b"&gt;&lt;select id="selRegiune" name="Beta" onchange="regiuneChg()"&gt;&lt;/select&gt;&lt;/td&gt;
        &lt;td class="c"&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function()
   {
   $.getJSON("/scripts/031A_GetProvincie.php", success = function(data)
      {
      var str_options = "";
      for (var i=0; i &lt; data.length; i++)
          {
          str_options += "&lt;option value='" + data[i] + "'&gt;" + data[i] + "&lt;/option&gt;";
          }
  
      $("#selProvincie").append(str_options);
      $("#selProvincie").change();
  
      });
  
   $("#selProvincie").change(function()
      {
      $.getJSON("/scripts/031B_GetProvRegiune.php?provincie=" + $(this).val(), success = function(data)
         {
         var str_options = "";
         for (var i=0; i &lt; data.length; i++)
             {
             str_options += "&lt;option value='" + data[i] + "'&gt;" + data[i] + "&lt;/option&gt;";
         }
  
       $("#selRegiune").html("");
       $("#selRegiune").append(str_options);
       $("#selRegiune").change();
  
       });
    });
  
   $("#selRegiune").change(function()
      {
      $.getJSON("/scripts/031C_GetProvRegiuneZona.php?regiune=" + $(this).val(), success = function(data)
         {
         var str_options = "";
         for (var i=0; i &lt; data.length; i++)
             {
             str_options += "&lt;option value='" + data[i] + "'&gt;" + data[i] + "&lt;/option&gt;";
             }
  
         });
      });
  
   });
  </code></pre>
  
  <p>Using the above as an example (I'm new to JavaScript) I want to write a <strong>new form</strong>, which has a text input field (Text1) inserted between List1 and List2. List2 is generated from the option selected in List1 AND the text in Text1. But I really don't know how to use the process the input text in JavaScript to make the whole thing work.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="input_frm"&gt;
    &lt;form method="post" action="&lt;?php print dataclean($_SERVER["PHP_SELF"]);?&gt;"&gt;
      &lt;table class="input_tbl"&gt;
        &lt;tr&gt;
           &lt;td class="a"&gt;Select county&lt;/td&gt;
           &lt;td class="b"&gt;&lt;select id="selJudet" name="Alfa" onchange="judetChg()"&gt;&lt;/select&gt;&lt;/td&gt;
           &lt;td class="c"&gt;&lt;input class="button_face" type="submit" value="Submit"&gt;&lt;/td&gt;
           &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td class="a"&gt;Zone wildcard text&lt;/td&gt;
           &lt;td class="b"&gt;&lt;select id="selText" name="Beta" onchange="textChg()"&gt;&lt;/select&gt;&lt;/td&gt;
           &lt;td class="c"&gt;&lt;/td&gt;
           &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td class="a"&gt;Select zone&lt;/td&gt;
           &lt;td class="b"&gt;&lt;select id="selZona" name="Gamma" onchange="zonaChg()"&gt;&lt;/select&gt;&lt;/td&gt;
           &lt;td class="c"&gt;&lt;/td&gt;
           &lt;/tr&gt;          
        &lt;/table&gt;
     &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Question: What's the JavaScript for this form ? List2 should change anytime a change occurs in either a new option is selected from List1 OR a new the string in Text1 changes.</p>