jQuery Related(Dependent)选择插件


jQuery Related (Dependent) Selects Plugin

我为依赖选择框找到了这个jquery插件。这现在起作用了,但我有大问题!当把它放在提交表单中时不起作用,因为这个插件使用json处理表单id和post/get数据。原始演示HERE

问题e.x:

<div id="box">
   <form action="search.php" method="POST" >
   <form id="example-1">
   <div class="field">
   <label for="name">state :</label>
    <select name="stateID">
    <option value="">Choose State &raquo;</option>
    <option value="MA">Massachusetts</option>
    <option value="VT">Vermont</option>
    </select>
    </div>
    <div class="field">
    <label for="name">Country :</label>
    <select name="countyID">
    <option value="">Choose County &raquo;</option>
    </select>
    </div>
    <div class="field">
    <label for="name">town :</label>
    <select name="townID">
    <option value="">Choose Town &raquo;</option>
    </select>
    </div>
    <div class="field">
    <label for="name">village :</label>
    <select name="villageID">
    <option value="">Choose Village &raquo;</option>
    </select>
    </div>
</form>
</form>
</div>

如果我删除表单操作这个插件工作得很好,否则就不工作了。如何解决这个谢谢。

要详细说明我的评论,您可以捕获表单的提交并按照自己的意愿进行处理。

$("form").submit(function(e){
  e.preventDefault(); //stop the default behavior
  $.ajax({
    type: 'POST', //default is get, set to 'POST' if you want to post.
    url: 'search.php',
    success: function(data){
      //if our data was returned from our search file as json, then...
      $("#element").html(data.a) //returns the a value from our json object
      $("#element").html(data.b) //returns the b value from our json object
      //etc
    }
  });
});

submit函数停止表单按照通常的方式提交,并停止页面重新加载。然后,我们使用ajax请求通过"POST"方法将数据发送到文件search.php。返回的数据在一个对象中发送,我们通过success:function(data)访问它。然后,如果我们的数据是用JSON值返回的,我们可以使用data.a来获取a值,或者使用data.b来获取JSON字符串的b值。