2012-03-15 33 views
0

我發現this jquery插件的依賴選擇框。這現在工作,但我有大問題!當把這個提交表單不起作用,因爲這個插件使用表單id和post/get數據使用json。原始演示HEREjQuery相關(從屬)選擇插件

問題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> 

如果我刪除表單操作這個插件完美地工作,否則沒有奏效。如何解決這個謝謝。

+0

你有一個隨機的

標籤內的只是漂浮在那裏。刪除標籤。不要使用div class ='field',請考慮使用
標籤併爲其設計樣式。 – Ohgodwhy 2012-03-15 22:16:02

+0

當所有的表單都在一個div中時,fieldset工作。我改變了我的問題!我有每個selectBox任何div(class = field)和labal。 – 2012-03-15 22:25:28

回答

0

爲了詳細說明我的評論,您可以捕獲表單的提交併按照您的喜好進行操作。

$("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值。