title: When sending multi select value jquery/ajax data is incorrect?
body: <p>I have multi select drop down menu. When user selects values jquery/ajax request should be sent to the server. Here is example of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#send").on("click", function() {
    var elem$ = $("#cars"),
      elemVal = elem$.val();
    console.log(elemVal);
    if (elemVal) {
      $.ajax({
        type: 'POST',
        url: 'requestTest.html?fn=saveCar',
        data: {'cars': elemVal},
        dataType: 'json'
      }).done(function(obj) {
        console.log(obj);
      }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("An error has occured.");
      });
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select name="cars" id="cars" multiple&gt;
    &lt;option value=""&gt;--Select Car--&lt;/option&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="opel"&gt;Opel&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  &lt;button type="button" name="send" id="send"&gt;Send&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code ajax call returned an error. It was telling me that cars element is required in my function but it's not passed in. I checked my developer tools and here is what I found under Params:</p>
  
  <pre><code>{"cars[]":["volvo","saab"]}
  </code></pre>
  
  <p>It looks that data is not structured properly. I'm wondering what is causing <code>cars</code> to get an array in front? What is the best way to fix this issue? Thank you.</p>