title: Change Select value with Jquery
body: <p>I'm trying to use Jquery to change the value from a "select" input in a form, but when it changes, the function for that change doesn't work.  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id='select'&gt;
    &lt;option checked value='1' &gt;Option 1&lt;/option&gt;
    &lt;option value='2' &gt;Option 2&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id='text'&gt;Option 1 selected&lt;/div&gt;
  &lt;div id='button'&gt;Click to select Option 2&lt;/div&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$('#select').change(function(){
      if($(this).val() == '1'){
      $('#text').text('Option 1 selected');
    } else if($(this).val() == '2'){
      $('#text').text('Option 2 selected');
    }
  });
  
  $('#button').click(function(){
      $('#select').val('2');
  })
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#button {
    cursor: pointer;
    color: white;
    background: red;
    padding: 5px;
    display: inline-block;
  }
  </code></pre>
  
  <p>Demo: <a href="https://jsfiddle.net/fdko9nna/" rel="noreferrer">https://jsfiddle.net/fdko9nna/</a></p>
  
  <p>When I click the <code>#button</code>div, it changes the select field, but the function that changes the <code>#text</code> it's not executed.<br>
  Thanks.</p>