title: How to put multiple arguments inside OPTION for Javascript?
body: <p>I created a table in SQL via PHP that has 3 columns. I'm trying to put the values inside a SELECT dropdown in this way:</p>
  
  <ul>
  <li>The first column will be in the value of the OPTION (for passing in the POST).</li>
  <li>The second column will be in the display of the OPTION.</li>
  <li>The third column will be hidden and sticks to each row in the dropdown, so when the user chooses one option from the dropdown, the hidden column will present in other div.</li>
  </ul>
  
  <p>For example, if the table is:</p>
  
  <pre><code>col1  col2  col3
  -----------------
  1     Joe   Key st.
  2     Matt  Link st.
  </code></pre>
  
  <p>When the user chooses Joe, <code>Key st.</code> will display in a separate div, and after the user presses enter, the value <code>1</code> will be sent via POST.</p>
  
  <p>This is what I got so far:</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>$('.foo3').on('change', function() {
    var add = $(this).parent().find('.foo3').value();
    $('.foo2').html(add);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="foo3"&gt;
    &lt;?php while ($curRow=mysqli_fetch_array($TableOutput)) {                                                      
      echo "&lt;input class='foo' type='hidden' value='{$curRow['col3']}'&gt;&lt;option value='{$curRow['col1']}'&gt;{$curRow['col2']}&lt;/option&gt;"; 
    } ?&gt;
  &lt;/select&gt;
  &lt;div class="foo2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!</p>