2016-07-22 60 views
-1

好傢伙多重下拉我想基於這個國家,並根據國家的城市化狀態。如何更改使用jQuery JSON和PHP

<label>Country:</label><br/> 
     <select onchange="getval(this)"> 
     <option value="">Select Country</option> 
     <option value="india">India</option> 
     <option value="america">America</option> 
     </select> 


    <select name="" id=""> 
     <option value="">Select State</option> 
     <option value="india">Orissa</option> 
     <option value="india">Telangan</option> 
     <option value="america">USA</option> 
     <option value="america">California</option> 
    </select> 



<select name="" id=""> 
    <option value="">Select city</option> 
    <option value="orissa">Nal</option> 
    <option value="orissa">Mir</option> 
    <option value="Telangan">Hyd</option> 
    <option value="Telangan">Vija</option> 
    <option value="america">KRK</option> 
    <option value="america">MRK</option> 
</select> 


How to change state based on country. and afterthat change city based on state. 
Thanks in advance. 

只是我想看看下面這個鏈接。 http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/

+0

顯示你的代碼,你試試這麼遠嗎? –

+0

你需要爲此學習ajax。 –

+0

@Nikhil Vaghla我沒有寫任何代碼。我不知道如何編寫代碼。它應根據第一個選擇選項進行更改。 – JBK

回答

0

你需要的是容易做,你只需要在你的下拉列表使用Ajax和onChange事件玩:

<select id="idCountries" onchange="updateStatesByCountry()"> 
    <option value="">Select Country</option> 
    <option value="india">India</option> 
    <option value="america">America</option> 
</select> 

<select id="idStates" onchange="updateCitiesByState()"> 
    <option value="">Select State</option> 
    <option value="india">Orissa</option> 
    <option value="india">Telangan</option> 
    <option value="america">USA</option> 
    <option value="america">California</option> 
</select> 

... 

在您的JS代碼添加所需的功能:

function updateStatesByCountry(){ 
    console.log($('#idCountries').val()); 
    //Here add Ajax logic to load a new dropdown with all states of the current country 

    //Your AJAX call should be something like this 
    $.get('/getStatesByCountry?country='+ $('#idCountries option:selected').val(), function(data){ 
     $('#idStates').empty(); 
     $('#idStates').append(data); 
    }); 
}); 
} 

//Same logic for the next dropdowns. 

我強烈建議您在編寫此代碼之前閱讀有關AJAX的內容。

+0

這裏我沒有使用ajax或任何數據庫表。只更改僅使用JavaScript或jquery更改第一項。 – JBK

+0

@JBK但你需要檢索數據時,前一個是改變每個下拉列表填充,可以使用JS數組與所有默認值每個國家/州 – cralfaro

+0

好,謝謝您的建議和代碼。但是不能在這裏使用ajax還有沒有其他解決方案。 – JBK