title: Javascript/jQuery/html: How to automatize data retrieval from page source, when 'hard' refresh is involved?
body: <p>IMPORTANT NOTE: I have totally rephrased/edited my original question, so please do not consider the first answer as irrelevant.</p>
  
  <p>Here is the situation:
  There is <a href="http://publik.tuwien.ac.at/program/listpubs.php" rel="nofollow">this</a> web page of publications database, where the user selects different filters in order to search for certain articles, which meet specific criteria. In some cases, like when selecting Group of people or a particular person, the filtering is achieved from drop lists. When the user selects a group (from the 'Group' filter), then the corresponding list of people's names appear at the 'Person' selection drop list filter. Also when the value in the 'Group' drop list changes, the page is reloaded with the new drop list for the 'Person' filter. My aim is to retrieve and save the content of the 'Person' filter for each value in the 'Group' filter. And I would like to do so by using Javascript code in the Console window. However, I don't want to manually change the value of the 'Group' filter and then retrieve the 'Person' contents, but, in other words, to build an automated process within the Console window (this is the only way I know) to pick up the data I require.</p>
  
  <p>Here is my problem:
  Considering that my approach is not completely crazy, that's what I try to do at the Safari's Console (please let me know if there is another way):</p>
  
  <pre><code>// Since the jQuery is not loaded in the resources I call it by this:
  
      var script = document.createElement('script');
      script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";
      document.getElementsByTagName('head')[0].appendChild(script);
  
  // I locate the 'Group' Select List and I store the values of its options by this:
  
      $(document).ready(function(){
         //Cycle through all the groups
          var abtOptValues = new Array();
          $("[name='abt']&gt;option.[value!='-1']").each(function(l){
              abtOptValues[l] = $(this).attr("value");
          });
  
  // Now, with the values from the 'Group' Select List in an array I want to cycle through
  // each one of them and get the respected values of the 'People' Select List. So I try this:
  
      for (var abtOptValue in abtOptValues)
      {
          $("[name='abt']").val(abtOptValues[abtOptValue]); //set the option in
                                                                // the 'Group' List
              var persOptValue = new Array();
              $("[name='pers']&gt;option.[value!='-1']").each(function(i){ 
                      persOptValue[i] = $(this).attr("value");
              });
  
          console.log(persOptValue);
      }
  });
  </code></pre>
  
  <p>However, as Mike accurately comments below, this is not a proper approach, while the javascript in the console runs, the javascript, which controls the contents of Select Lists, will not run. Only after the Console's script has completed the script for the controls will pick the current value selected for the 'Group' List and will print the corresponding to this option content of the 'people' list that many times as the number of options in the 'Group' List. </p>
  
  <p>If hopefully the above makes sense, my question would be what is the strategy to follow in order to achieve such an automation, as a viewer of the page in my browser, without having access to the page resources? </p>
  
  <p>If I would try to diagrammatically describe the order of the actions I would need to take place that would be:</p>
  
  <blockquote>
    <p>page is loaded  ->   jQuery library is loaded  ->   options of 'Group'
    List collected  ->   set the first option in 'Group' List  ->   page
    is reloaded  ->   jQuery library is loaded  ->   options of 'People'
    List (corresponding to the 1st 'Group' option) collected  ->   set the
    second option in 'Group List  ->   jQuery library is loaded -><br>
    options of 'People' List (corresponding to the 2nd 'Group' option)
    collected  ->   set the third option in 'Group' List and so on...</p>
  </blockquote>
  
  <p>Thank you in advance.</p>
  
  <p>PS: Please mention (although you have already speculated) that I'm pretty much novice in this area of html and jQuery.</p>
  
  <p><strong>EDIT:</strong> After discussing with a friend on this topic, he explained me a few things, which I will try to reassemble here, as far as I could understand, but please state the way you would do it, if you wish.</p>
  
  <p>So firstly, one important parameter is the fact that I don't have access to the server and to the page source, so what I'm asking for is to 'hack' the content that has already arrived in my browser, in order to retrieve the data I need. Which is possible, as long as I don't need to refresh the page. And a refresh takes place when, for example a new value in a Select List is selected and the page automatically refreshes to update the content of the children drop Lists. Secondly, I need to automate the process and be able to have typed the code in the console, to press enter once and let the process I described above to continue until to its completion. </p>
  
  <p>The friend suggests that is nearly impossible, unless an external application would take the management role of starting and stoping the javascript in the console, takes notice of when the page has refreshed and controlling the communication among each other, as well. He underlined that the normal way in general would be to have access to the server, where I could ask to have returned in my browser only the data I desire. I am looking forward to your answers.</p>