jQuery muddle:加载一个表单，然后加载另一个表单的表单

我让自己陷入了一点混乱，解决方案一半有效。

基本上，我使用附加到<select>的基本.load()来拉取另一个表单，其中包含通过 PHP/MySQL 填充<select>。然后我想要的是这个新加载的<select>，然后加载另一个再次通过 PHP/MySQL 填充的表单。当用户更改<select>中的任何一个时，可以说更改基本上需要向下移动堆栈。

目前，当选择一个选项并触发.change()时，它可以正常工作，工作正常。问题是第二个<select>的初始加载，我不确定如何发射我想要的.load()。

当前版本在这里：http://kick.hooplahosts.co.uk/fire/FireServiceProject/bag.php

并且有问题的表格在左侧（级别，编号和项目），您可以看到多选不会加载第一次加载或刷新，或者即使袋子级别发生变化，也需要在袋子编号中进行实际选择才能做我想做的事情。

我已经编辑了大部分不相关的html，脚本有点"正在进行中"

.HTML

 <form action="php/bagCreate/newBag_bag.php" method="post" id="form1">
    <h2>Select Bag Level</h2>
    <select id="target" class="get" name="bagLevel">
      <option>Level 1</option>
      <option>Level 2</option>
      <option>Level 3</option>                                
    </select>        
 </form>            
<div id="upForm">
  <label>Bag Number</label>
  <form action="php/bagCreate/getContents_bag.php" method="post">
     <select id="target" class="getContents" name="bagNumber">
        <option>1</option>
        <option>2</option>
        <option>3</option>
     </select>        
  </form>
  <div id="upFormContents">
  <form>
  <label>Items in Bag</label>
     <select id="select2" class="input-large" multiple="multiple" size="20">
        <option>dsfgdsg</option>
        <option>dsfgdsgdfgfd</option>
    </select>        
  </form> 

.JS

$(document).on("change", "select.getContents", function(){
  var action = $('select.getContents').parent().attr('action');        
  fillContents(action)    
});
$(document).on("ready", "select.getContents", function(){
  var action = $('select.getContents').parent().attr('action');        
  fillContents(action)
});  
function fillContents(action){        
   $('#upFormContents').load(action,    
   $('select.getContents').parent().serializeArray());
}

$('.getContents').trigger('change');