jQuery相關（從屬）選擇插件

Question

我發現this jquery插件的依賴選擇框。這現在工作，但我有大問題！當把這個提交表單不起作用，因爲這個插件使用表單id和post/get數據使用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。返回的數據通過一個對象發送，我們通過成功訪問它：function（data）。然後，如果我們的數據是用JSON值返回的，那麼我們可以使用data.a來獲取一個值，或者使用data.b來獲取我們的JSON字符串的b值。