title: How to alternate 2 onchange() functions in mvc razor?
body: <p>I have cascade drop down lists and I should to send form data to controller in every <code>onchange()</code> event. That is why I should to do 2 different operations on <code>onchange()</code> event of dropdownlist. </p>
  
  <p><strong>1) This sends data to controller in every onchange() event of dropdowlists:(It is my first dropdownlist)</strong></p>
  
  <pre><code>@Html.DropDownListFor(model =&gt; model.CategoryId, ViewBag.CategoryList as IEnumerable&lt;SelectListItem&gt;, "-",
   new { id = "CategoryDDL", onchange = "$('#MyForm').trigger('submit');" })
  </code></pre>
  
  <p><strong>2)This is for cascade dropdownlists:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $("#CategoryDDL").change(
          function () {
              loadLevelTwo(this);
          });
          loadLevelTwo($("#CategoryDDL"));
      });
  
  
  function loadLevelTwo(selectList) {
         // my some code...
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In this case when I change  <code>CategoryDDL</code>  drop down list, 2 operations mix. It tries to do 2 operation together.</p>
  
  <p>I want to alternate them. Firstly cascading operation works, then data submit operation works.
  How can I do this?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Without <code>loadLevelTwo()</code> function, everything works well: when I change dropdown list, request goes to the controller to filter products. 
  Then I added <code>loadLevelTwo()</code> for cascading dropdown list. Because I have 2 dropdownlist. I want when I change first dropdownlist, second dropdownlist updated automatically. My script does this. But, these events together works mixed. In the controller, I have actions for filtering an for cascading drop down:</p>
  
  <pre><code>public ActionResult FilterProducts(CriteriaModel model) {}
  </code></pre>
  
  <p>and </p>
  
  <pre><code>public ActionResult GetSubCategoryByCategoryId(int id) {}
  </code></pre>
  
  <p>These methods work in same time. One line works in any action, then gets into other action. then come backs first action, So, it is surrounded while actions return view.
  I send form after <code>loadLevelTwo()</code> function, but it doesn't fix the issue:</p>
  
  <pre><code>    loadLevelTwo($("#CategoryDDL"));
      $('#MyForm').trigger('submit');
  </code></pre>