title: Adding value from multiple select option to input value
body: <p>I have 2 seletboxes</p>
  
  <pre><code>&lt;select id="field1" class="inputtextbox  required" size="0"&gt;
  &lt;option value="Student"&gt;Student&lt;/option&gt;
  &lt;option value="Teacher"&gt;Teacher&lt;/option&gt;
  &lt;option value="Director"&gt;Director&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="field2" class="inputtextbox  required" size="0"&gt;
  &lt;option value="2000"&gt;2000&lt;/option&gt;
  &lt;option value="2001"&gt;2001&lt;/option&gt;
  &lt;option value="2002"&gt;2002&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and I have an empty INPUT field</p>
  
  <pre><code>&lt;input name="title" type="text" id="title" value=""&gt;
  </code></pre>
  
  <p>Now, what I'm trying to achieve is:</p>
  
  <p>Now when I select for example a option from the first selectbox, for example I select "Student", the text "Student" is copied to the INPUT value, then for example I select an option from the second selectbox, let's say 2001, now this must be added to the INPUT value too..</p>
  
  <p>I have made this but it's not working quite right, the code I made adds the select option value to the input but it deletes the other values from other select options that were added to the input..</p>
  
  <pre><code>jQuery('#field1').on('change', function () {
        jQuery("input[name='title']").val(jQuery( "#field1" ).val());
  });
  </code></pre>
  
  <p>So this code works, but it works only for ONE select option, for example if the code is like this:</p>
  
  <pre><code>jQuery('#field1').on('change', function () {
        jQuery("input[name='title']").val(jQuery( "#field1" ).val());
  });
  jQuery('#field2').on('change', function () {
        jQuery("input[name='title']").val(jQuery( "#field2" ).val());
  });
  </code></pre>
  
  <p>Now for example I select "Student" from the "field1" selectbox, and select "2001" from the "field2" selectbox, the value of input must be "Student 2001", instead the input contains only ONE of the selected values "Student" or "2001" .. depending on which is last selected...</p>
  
  <p>Can somebody help me to achieve so the input value has all 2 selected options please?</p>
  
  <p>Thank you</p>
  
  <p>UPDATE</p>
  
  <p>With the help of "bipen" the code work like this now:</p>
  
  <pre><code>jQuery('#field1').on('change', function () {
  jQuery("input[name='title']").val(jQuery( "#field1" ).val() + ' ' + jQuery( "#field2" ).val());
  });
  
  jQuery('#field2').on('change', function () {
  jQuery("input[name='title']").val(jQuery( "#field1" ).val() + ' ' + jQuery( "#field2" ).val());
  });
  </code></pre>
  
  <p>I had to put the values to both codes because user can select a value from the second selectbox not necessarily from the first..</p>
  
  <p>Wondering, is there any way to make this code less and cleaner... ?</p>