jQuery Related（Dependent）プラグインを選択してください

Question

私はthis依存型選択ボックスのjqueryプラグインを発見しました。これは今働いたが、大きな問題がある！このプラグインがフォームIDで動作し、jsonを使用してデータをポスト/取得するため、このフォームをsubmitフォームに置くと機能しませんでした。オリジナルデモ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 
    } 
    }); 
}); 

submit関数は、フォームが通常の方法で送信されるのを停止し、ページの再読み込みを停止します。次に、ajaxリクエストを使用して、 'POST'メソッドを使用してsearch.phpファイルにデータを送信します。返されたデータはオブジェクト内に送られ、成功：function（data）を通してアクセスされます。次に、データがJSON値で返された場合は、data.aを使用して値を取得するか、data.bを使用してJSON文字列のb値を取得することができます。