title: Proper way to select multiple options from <select> form field using CasperJS/PhantomJS
body: <p>I am automating testing of a web page in which there exists two multi select fields on a form.  The one on the left contains a list of country names, the one on the right contains the ones you have selected.  Countries can exist on one list but not the other.  When you click a country it moves to the other list (you get the idea).  When the form is submitted the values in the POST look like this (from chrome inspection):</p>
  
  <pre>
  data[Campaign][unselected_country_codes]:
  data[Campaign][unselected_country_codes][]:AF
  data[Campaign][unselected_country_codes][]:AX
  data[Campaign][unselected_country_codes][]:AL
  data[Campaign][unselected_country_codes][]:DZ
  data[Campaign][unselected_country_codes][]:AS
  data[Campaign][unselected_country_codes][]:AD
  data[Campaign][unselected_country_codes][]:AO
  data[Campaign][unselected_country_codes][]:AI
  data[Campaign][unselected_country_codes][]:AG
  data[Campaign][unselected_country_codes][]:AR
  ... (ALL countries not selected are in this list)
  
  data[Campaign][country_codes]:
  data[Campaign][country_codes][]:US
  data[Campaign][country_codes][]:AQ
  data[Campaign][country_codes][]:BD
  ... (this part contains the ones we have selected)
  </pre>
  
  <p>and here is what the HTML looks like for the select list of the countries you want included:</p>
  
  <pre><code>&lt;select name="data[Campaign][country_codes][]" multiple="multiple" id="CampaignCountryCodes" data-quicklist-ref="CampaignCountryCodes_quick" data-alter-ref="CampaignCountryCodes_alter"&gt;
  &lt;option value="US" selected="selected"&gt;United States&lt;/option&gt;
  &lt;option value="AQ" selected="selected"&gt;Antarctica&lt;/option&gt;
  &lt;option value="BD" selected="selected"&gt;Bangladesh&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>What I don't understand is, how would I set those form values at the time of testing?  I don't really understand the <code>&lt;select&gt;</code> attribute of a form comes through as an array of values or what?  I would like to be able to submit the form and have a list of countries that are on, and a list that are off.</p>
  
  <p>Here is an example of what I do to set other values on the form that works correctly.  I really have no idea how to do this for a multiple and that is the question being asked.</p>
  
  <p>This example is a text area that works just great.</p>
  
  <pre><code>casper.waitForSelector(x('//*[@id="some text area"]'),
     function success() {
          test.assertExists(x('//*[@id="some text area"]'));
  
          this.fill('form#campaign_form', { 
              'data[Campaign][some_field]': 'include',
              'data[Campaign][the_field]': myvar + "\n"
          }, true); 
     },
     function fail() { ... }
  );
  </code></pre>