如何在html中從數據庫中創建一個動態的下拉列表？

-2

如何爲我的html頁面創建一個動態下拉列表，但是使用來自數據庫的值來填充基於另一個框中的值的可用下拉項目？這與您從一個下拉列表中選擇州和從下拉列表中選擇城市相同，您選擇城市，您可以從另一個城市選擇郵政編碼。我一直在網上搜索，但找不到任何演示使用數據庫。有沒有人有他們可以發佈的一些例子？我正在學習使用下面的代碼，我可以從文本框中添加，但從數據庫中提取時沒有任何內容？ JavaScript實際上是否必須進行連接，如果是的話，你如何保護dB的憑據？如何在html中從數據庫中創建一個動態的下拉列表？

function addCombo() { 
    var textb = document.getElementById("txtCombo"); 
    var combo = document.getElementById("combo"); 

    var option = document.createElement("option"); 
    option.text = textb.value; 
    option.value = textb.value; 
    try { 
     combo.add(option, null); //Standard 
    }catch(error) { 
     combo.add(option); // IE only 
    } 
    textb.value = ""; 
}

來源

2014-04-17 user3485445

AJAX是要走的路。 –

這方面有很多問題。嘗試搜索「級聯下拉」。 – McGarnagle

首先，我認爲你必須在web開發中理解服務器端的內容和客戶端的內容。 Javascript（在這種情況下）在客戶端。數據庫和數據讀取和排列在服務器端。 – aldux

對於AJAX，請檢查此示例。這是2下拉菜單。

服務
醫生

所以，當你選擇了服務，那麼你就可以得到醫生。當你選擇醫生時，它會將你重定向到一個URL。希望能幫助到你！

HTML 單擊選擇服務服務1 服務2 服務3

<select id="doctors"> 
</select>

// The data that the service should return 
// JSFiddle will echo it back for us on that URL 
var doctors = { 
    success: true, 
    doctors: [ 
     { 
      id: 71, 
      name: "George" 
     }, 
     { 
      id: 72, 
      name: "James" 
     } 
    ] 
} 

// This is what your JSON from PHP should look like 
var jsonDoctors = JSON.stringify(doctors); 
console.log(jsonDoctors); 

// Bind change function to the select 
jQuery(document).ready(function() { 
    jQuery("#services").change(onServiceChange); 
}); 

function onServiceChange() 
{ 
    var serviceId = jQuery(this).val();  

    $.ajax({ 
     url: '/echo/json/', 
     type: 'post', 
     data: { 
      serviceId: serviceId, 
      json: jsonDoctors // jsFiddle echos this back to us 
     }, 
     success: onServicesRecieveSuccess, 
     error: onServicesRecieveError 
    }); 
} 

function onServicesRecieveSuccess(data) 
{ 
    // Target select that we add the states to 
    var jTargetSelect = jQuery("#doctors"); 

    // Clear old states 
    jTargetSelect.children().remove(); 

    // Add new states 
    jQuery(data.doctors).each(function(){   
     jTargetSelect.append('<option value="'+this.id+'">'+this.name+'</option>'); 
    }); 
} 

function onServicesRecieveError(data) 
{ 
    alert("Could not get services. Please try again."); 
}

來源

2014-04-17 19:34:18 manosim

如何在html中從數據庫中創建一個動態的下拉列表？

回答

相關問題