Laden von Werten aus der Datenbank in JavaScript in einem ausgewählten Tag

Question

Ich bin neu in JavaScript. Mein Problem ist, ich habe 3 HTML-Tags auswählen. eine für das Land, die nächste für den Staat und die letzte für die Stadt. Ich habe verschiedene Tabellen wie Länder, Staaten, Städte. Das Problem ist, wenn ich auf das jeweilige Land klicke, werden die entsprechenden Zustände mit onchange-Ereignis in Java-Script geladen. Nach dem Laden muss ich auf den Status klicken, dann sollten die entsprechenden Städte geladen werden.

aber ich kenne die Codierung nicht. wenn jemand es hat, bitte sende mich. es ist dringend. Mein Chef wartet auf mein Ergebnis.

Answer 1

Sie werden in AJAX suchen müssen. Was Sie zu erreichen versuchen, ist äußerst häufig. Es gibt jede Menge Beispiele, wenn Sie eine schnelle Google-Suche nach cascading dropdowns durchführen.

Da Sie sich mit AJAX befassen, schlage ich vor, dass Sie mit einer Bibliothek wie jQuery beginnen, da die Erstellung von Browserkompatibilität eine zeitraubende Aufgabe ohne sie ist.

Um Ihnen den Einstieg, würden Sie wie folgt eine Grundstruktur brauchen:

$('#my-select').change(function() { 
    // code that will be evaluated when #my-select changes 
}); 

Von dort würden Sie einen AJAX-Request etwa wie so initiieren:

var country = $('#my-select').val(); 
$.post('/get-states', { country: country }, function(res) { 
    // code that will be evaluated when the ajax request completes 
}); 

In den Rückruf oben , würden Sie die Child-Dropdowns füllen.

Answer 2

Wenn ich richtig verstanden habe, was Sie tun möchten, ist AJAX.

Wenn das onchange-Ereignis eintritt, sendet der JavaScript-Code eine Anfrage an den PHP eines Servers (oder an andere Serverskripts), der die Anfragen verarbeitet, und sendet die Daten an das Javascript zurück, das die Daten verarbeitet und an den Benutzer ausgibt.

Ich kenne den Code selbst nicht von der Spitze meines Kopfes, aber ich kann empfehlen, dass Sie Jquery und seine Plugins betrachten, dort werden Sie sicher den Code finden, den Sie wollen, und schnell den ganzen Prozess zusammenbauen.

EDIT: und ich habe gerade Ihre Antwort durch die andere Antwort: Cascade Dropdown List using jQuery/PHP

Answer 3

JS:

var states = new Array(); 

states['Canada'] = new Array('Alberta','British Columbia','Ontario'); 
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco'); 
states['United States'] = new Array('California','Florida','New York'); 


// City lists 
var cities = new Array(); 

cities['Canada'] = new Array(); 
cities['Canada']['Alberta']   = new Array('Edmonton','Calgary'); 
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver'); 
cities['Canada']['Ontario']   = new Array('Toronto','Hamilton'); 

cities['Mexico'] = new Array(); 
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali'); 
cities['Mexico']['Chihuahua']  = new Array('Ciudad Juárez','Chihuahua'); 
cities['Mexico']['Jalisco']   = new Array('Guadalajara','Chapala'); 

cities['United States'] = new Array(); 
cities['United States']['California'] = new Array('Los Angeles','San Francisco'); 
cities['United States']['Florida'] = new Array('Miami','Orlando'); 
cities['United States']['New York'] = new Array('Buffalo','new York'); 


function setStates() { 
    cntrySel = document.getElementById('country'); 
    stateList = states[cntrySel.value]; 
    changeSelect('state', stateList, stateList); 
    setCities(); 
} 

function setCities() { 
    cntrySel = document.getElementById('country'); 
    stateSel = document.getElementById('state'); 
    cityList = cities[cntrySel.value][stateSel.value]; 
    changeSelect('city', cityList, cityList); 
} 

function changeSelect(fieldID, newOptions, newValues) { 
    selectField = document.getElementById(fieldID); 
    selectField.options.length = 0; 
    for (i=0; i<newOptions.length; i++) { 
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]); 
    } 
} 

// Multiple onload function created by: Simon Willison 
// http://simonwillison.net/2004/May/26/addLoadEvent/ 
function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 

addLoadEvent(function() { 
    setStates(); 
}); 

HTML:

<fieldset style="width: 230px;"> 
<legend><strong>Make your selection</strong></legend> 
<p> 
<form name="test" method="POST" action="processingpage.php"> 
<table> 
<tr> 
<td style="text-align: left;">Country:</td> 
<td style="text-align: left;"> 
<select name="country" id="country" onchange="setStates();"> 
    <option value="Canada">Canada</option> 
    <option value="Mexico">Mexico</option> 
    <option value="United States">United States</option> 
</select> 
</td> 
</tr><tr> 
<td style="text-align: left;">State:</td> 
<td style="text-align: left;"> 
<select name="state" id="state" onchange="setCities();"> 
    <option value="">Please select a Country</option> 
</select> 
</td> 
</tr><tr> 
<td style="text-align: left;">City:</td> 
<td style="text-align: left;"> 
<select name="city" id="city"> 
    <option value="">Please select a Country</option> 
</select> 
</td> 
</tr> 
</table> 
</form> 
</fieldset> 

Es dauerte 5 Sekunden, um zu googlen und es einzufügen. Plz recherchieren vor dem Posten.

ursprüngliche Quelle: http://www.javascriptsource.com/forms/country-state-city-drop-down-list.html

Answer 4

Wenn Sie gerade im Internet suchen Sie viele Lösungen, aus denen bekommen würden Sie auf der Serverseite Technologie abhängig wählen, können Sie verwenden. Hier ist ein mit ASP.Net und JQuery

http://beyondrelational.com/modules/2/blogs/80/posts/10655/cascading-drop-down-examplecountry-state-and-city-in-jquery.aspx

Stackoverflow ist kein Ort, wo man Arbeit von anderen zu erledigen. Sie müssen Zeit und Mühe investieren, und nur wenn Sie ohne Antworten stecken bleiben, sollten Sie Ihre Fragen hier veröffentlichen. Ich markiere deine Frage aus diesem Grund.