[英]Populate Div by Drop Down
我正在嘗試創建一個動態頁面,該頁面根據下拉列表的選擇而變化。 因此,對於設置,我有兩個下拉菜單。 描述它的最簡單方法是“國家和地區”下拉列表。 我想要這樣,以便在選擇特定狀態時,將在該狀態下填充一個單獨的div。 現在這只是一個例子,但這幾乎是我想要的。 我已經使用一些簡單的Javascript和數組設置了兩個下拉列表,以便像這樣填充它們。
<script type="text/javascript">
var postState = '';
var postCountry = '';
var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
US:AR:Arkansas|\
';
var country = '\
US:United States|\
';
function populateCountry(defaultCountry) {
if ( postCountry != '' ) {
defaultCountry = postCountry;
}
var countryLineArray = country.split('|'); // Split into lines
var selObj = document.getElementById('countrySelect');
selObj.options[0] = new Option('Select Country','');
selObj.selectedIndex = 0;
for (var loop = 0; loop < countryLineArray.length; loop++) {
lineArray = countryLineArray[loop].split(':');
countryCode = TrimString(lineArray[0]);
countryName = TrimString(lineArray[1]);
if ( countryCode != '' ) {
selObj.options[loop + 1] = new Option(countryName, countryCode);
}
if ( defaultCountry == countryCode ) {
selObj.selectedIndex = loop + 1;
}
}
}
function populateState() {
var selObj = document.getElementById('stateSelect');
var foundState = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
}
selObj.options[0] = new Option('Select State','');
selObj.selectedIndex = 0;
}
// Populate the drop down with states from the selected country
var stateLineArray = state.split("|"); // Split into lines
var optionCntr = 1;
for (var loop = 0; loop < stateLineArray.length; loop++) {
lineArray = stateLineArray[loop].split(":");
countryCode = TrimString(lineArray[0]);
stateCode = TrimString(lineArray[1]);
stateName = TrimString(lineArray[2]);
if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
// If it's a input element, change it to a select
if ( selObj.type == 'text' ) {
parentObj = document.getElementById('stateSelect').parentNode;
parentObj.removeChild(selObj);
var inputSel = document.createElement("SELECT");
inputSel.setAttribute("name","state");
inputSel.setAttribute("id","stateSelect");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById('stateSelect');
selObj.options[0] = new Option('Select State','');
selObj.selectedIndex = 0;
}
if ( stateCode != '' ) {
selObj.options[optionCntr] = new Option(stateName, stateCode);
}
// See if it's selected from a previous post
if ( stateCode == postState && countryCode == postCountry ) {
selObj.selectedIndex = optionCntr;
}
foundState = true;
optionCntr++
}
}
function initCountry(country) {
populateCountry(country);
populateState();
}
</script>
我對Javascript不太滿意,所以就我所知。 如果有更簡單的方法來填充下拉列表,我全力以赴。 我在PHP方面非常有經驗,所以我希望可以通過某種方式來顯示內容。
重申一下,我有兩個下拉菜單。 在1中選擇選項,然后在2中提供不同的選項。單擊2中的選項,信息將顯示在下面的DIV中。 用戶應該能夠繼續選擇選項並顯示信息。
您需要考慮使用AJAX進行此操作。 實際上,數據集太大,無法將其全部存儲在本地。 我將使用jQuery寫我的回復,為了教學起見,我會簡化一些。 首先,我們需要一個狀態變化時的函數(請注意,您可以編寫一個匯總函數來完成所有操作,但我認為您還不處於該級別)
function changeDrop1() {
var country = $('#mydrop1').val();
$.getJSON('/your/ajax/file/?country=' + country, function(data) {
$('#mydrop2').empty();
$.each( data, function( key, val ) {
var opt = $('<option/>', {'value':key }).text(val);
$('#mydrop2').append(opt);
});
});
}
我的假設是,您的AJAX將針對通過的國家/地區進行輪詢,並返回一個JSON對象,如下所示
{ "AL":"Alabama", "AK":"Alaska" }
當腳本通過該國家/地區時,您將以這種格式返回狀態,並且可以使用每個狀態來遍歷狀態並填充下拉列表2。最后一步是如何觸發狀態。 在頁面中,您將添加
$(document).ready(function() {
$('#mydrop1').change( changeDrop1(); });
});
現在,當您的下拉列表值更改時,您將觸發AJAX填充下拉列表2。我希望這一切都有意義。 您可以重復使用相同的技術來檢查下拉列表2和填充div。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.