title: Jquery append option to select and get the selected value
body: <p>Having trouble with this part.
  I have a select populated with asp.net mvc and 2 other empty select that is populated by jquery</p>
  
  <pre><code>&lt;select id="Type" onchange="GetClassification(this.value);"&gt;
      @foreach (var item in Type)
      {
        &lt;option value="@item.TypeID"&gt;@item.TypeName&lt;/option&gt;
      }
  &lt;/select&gt;
  
  &lt;select id="Classification" onchange="GetDescription(this.value);"&gt;
  &lt;/select&gt;
  
  &lt;select id="Description" onchange="GetDescriptionTips(this.value);"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>So based on first select it populates the sencond, based on second it populates the third. First one populates right, second one populates right, third one doesn't populate on document ready.</p>
  
  <pre><code>   $(document).ready(function () {
        $(function () {
           var type = $("#Type option:selected").val();
           GetClassification(type);
        });
      });
  
      function GetClassification(typeID) {
          $.ajax({
              type: 'GET',
              url: '/types/Classification',
              data: { typeID: typeID },
              cache: false,
              success: function (data) {
                  $('#Classification option').remove();
                  $.each(data, function (index, val) {
                      var optionTag = $('&lt;option&gt;&lt;/option&gt;');
                      $(optionTag).val(val.ClassificationID).text(val.ClassificationName);
                      $('#Classification').append(optionTag);
                  });
              }
          });
      var classification = $("#Classification option:selected").val();
      GetDescription(classification);
  }
  
  function GetDescription(classificationID) {
      $.ajax({
          type: 'GET',
          url: '/types/Description',
          data: { classificationID: classificationID },
          cache: false,
          success: function (data) {
              $('#Description option').remove();
              $.each(data, function (index, val) {
                  var optionTag = $('&lt;option&gt;&lt;/option&gt;');
                  $(optionTag).val(val.DescriptionID).text(val.DescriptionName);
                  $('#Description').append(optionTag);
              });
          }
      });
  }
  </code></pre>
  
  <p>After load page, if I select second one it changes the third one right, but if change the first, it only changes the second.
  What I need is on load populate the second and third, then on change the first, re populate the second and third, and on change the second re-populate the third.</p>
  
  <p>I can see it doesn't assign selected on any stage, so I am not sure if need assign it.</p>
  
  <p>Hope I explained good.</p>
  
  <p>Any help will be appreciated.</p>