Question

我为依赖选择框找到了this jquery插件。这工作现在，但我有很大的问题！当把这个以提交形式放入时不起作用，因为这个插件使用表单id并使用json发布/获取数据。原始演示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>

如果我删除表单操作，此插件工作正常，否则无法正常工作。如何解决此问题。

Answer 1

要详细说明我的评论，您可以捕获表单的提交并按照您的喜好进行操作。

$("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
    }
  });
});

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

jQuery Related（Dependent）选择插件

1 个答案: