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

时间:2013-01-31 15:39:09

标签: php javascript jquery html ajax

我已经陷入了混乱,一半的解决方案可以解决。

基本上我使用附加到.load()的基本<select>来提取另一个表单,其中<select>通过PHP / MySQL填充。我当时想要的是这个新加载的<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());
}

1 个答案:

答案 0 :(得分:1)

使用<select>

加载第二个trigger('change');时,您可以触发更改事件

在你的情况下,例如:

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

当您更改第一个选择(行李等级)时,请务必使用此代码触发第二个选择。