title: Syntax for onchange event to update a hidden text box with the index value of a select box
body: <p>I mean, I feel like a total idiot, but I just can't seem to get this right, even after searching for almost two hours.  </p>
  
  <p>This select is followed by a hidden text field:</p>
  
  <pre><code>&lt;select name="location_id" class="select green-gradient" single&gt;
    &lt;option value="2"&gt;New York&lt;/option&gt;
    &lt;option value="3"&gt;London&lt;/option&gt;
    &lt;option value="4"&gt;Singapore&lt;/option&gt;
    &lt;option value="5"&gt;San Francisco&lt;/option&gt;
    &lt;option value="6"&gt;Milan&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type='text'  name="selected_location_id" class="hidden" value=""&gt;
  </code></pre>
  
  <p>// I usually use this code for checkboxes. It toggles the contents of a hidden text box. I understand that checking a select's values is different. But I can't seem to get it right.</p>
  
  <pre><code>$(document).ready(function(){
      $('.switch').change(function( ){
          if($(this).next().val() == 1){
              $(this).next().val(0);
          } else {
              $(this).next().val(1);
          }
      });
  })
  </code></pre>
  
  <p>// I've tried this: but it's not useful since I need to do this for all selects on the page. And it still doesnt update the hidden text box.</p>
  
  <pre><code>$(document).ready(function(){
     $('.select').change(function( ){
       var selectedValue = $(this "option:selected").val();
       $(this).next().val(selectedValue);
     });
  })
  </code></pre>
  
  <p>// Maybe I'm just tired. But it's time to ask for help.  Thanks in advance.</p>