Staat und Stadt wählen Sie Feld wie nationale Gliederung Seite

Ich versuche, einen Staat und Stadt Select-Box genau wie nationale Pannenseite zu simulieren. Hier ist die URL: https://www.nttsbreakdown.com/ntts/programs/main/main.php Staat und Stadt wählen Sie Feld wie nationale Gliederung Seite

Auf der linken Seite der Webseite, wenn Sie einen Staat auswählen, zeigt das Stadtauswahlfeld "Daten laden" und dann die Liste der Stadt in diesem Zustand. Sie können einen Stadtnamen in der Stadtauswahlbox suchen. Auch das Stadtauswahlfeld wird automatisch ausgewählt. Ich versuche JQuery zu verwenden, um zu simulieren, aber nicht ganz so. Zuerst muss ich klicken, um einen Zustand zu wählen, und dann klicken, um eine Stadt auszuwählen. Nicht wie die nationale Pannenseite, Sie müssen nur auf den Staat und die Stadt klicken automatisch Drop-Down und Sie können in der Stadt Auswahlfeld suchen. Ich frage mich, ob sie etwas anderes als JQuery gewählt haben. Wenn mir jemand in die richtige Richtung zeigen kann, schätze ich es sehr.

Quelle

2016-05-19 Sandy Wang

starten Da sie dynamisch die Liste der Städte werden geladen, werden sie mit jQuery-AJAX und eine REST-API wie Backend (in PHP) um die Liste der Städte zu liefern. –

Ich weiß, wie man eine getcity.php mit JavaScript lädt und den Inhalt der Stadtliste anzeigt. Aber ich kann nicht herausfinden, wie man das Stadt-Auswahlfeld automatisch mit der Suchfunktion ablegt, sobald der Benutzer einen Zustand auswählt. Irgendwelche Vorschläge? Vielen Dank –

Themen, die Sie in die richtige Richtung führen, beginnen mit Async-Anfragen über JQuery/Ajax-Implementierung oder XHR. Große Ressourcen bei MDN.

Im Wesentlichen haben Sie ein Onchange-Ereignis für die Dropdown-Liste 'Element auswählen' und sobald es in dieser Funktion geändert wird, würden Sie eine Anfrage an Ihren Dienst senden, die Daten für die Städte auf Basis dieser ID oder eines Teils von Kriterien. Das XHR wird einen Rückruf haben, damit Sie Ihren Browser nicht einfrieren. Aber in der Zwischenzeit, während die Anfrage bearbeitet wird und die Informationen erhalten Sie können ein Lade-GIF über den Abschnitt, der geladen wird (oder dies könnte vor der XHR-Anfrage getan werden), in der Rückruffunktion des XHR können Sie entfernen Das Laden gif und poulate die richtigen Daten in der Dropdown-Liste und Webseite aka Anfrage abgeschlossen.

--edit hinzugefügt Idee, wo

<!DOCTYPE html> 
 
<html> 
 
    <head>   
 
    </head> 
 
    <body> 
 
     <input id="state" list="stateList" name="stateList" /> 
 
     
 
     <datalist id="stateList"> 
 
      <option value="Texas" /> 
 
      <option value="Arizona" /> 
 
     </datalist> 
 
     
 
     <input id="city" list="cityList" name="cityList" /> 
 
     
 
     <!-- this data list is populated from an ajax request /java script once the state is selected you do a query based on its selected value --> 
 
     <datalist id="cityList"> 
 
      <option value="something1" /> 
 
      <option value="something2" /> 
 
      <option value="something3" /> 
 
      <option value="something4" /> 
 
     </datalist> 
 
    </body> 
 
    
 
    <script type="text/javascript"> 
 
     var inputStateHandler = document.getElementById('state'); 
 
     var inputCityHandler = document.getElementById('city'); 
 
      
 
     inputStateHandler.addEventListener('input', function() { 
 
      inputCityHandler.focus(); 
 
      inputCityHandler.open(); //this is what you need to figure out open does not exist as of yet. 
 
     }); 
 
    </script> 
 
</html>

Quelle

2016-05-19 03:28:14 Andrei

Danke für die Antwort. Wie lässt sich die Stadtauswahlbox automatisch auswählen und durchsuchbar machen? –

was meinst du mit durchsuchbar? Eine Auswahlbox ist eine Dropdown-Liste. Ich bin mir nicht sicher, ob ich genau verstehe, was Sie unter "durchsuchbar" verstehen. Aber um es fokussiert zu machen, tun Sie dies über seine DOM-Eigenschaft, also document.getElementById ("selectboxID"). Focus(); Verwenden Sie die Item-ID, um den Fokus auf das Objekt zu setzen. – Andrei

Durchsuchbar bedeutet, dass Sie den ersten Buchstaben der Stadt eingeben können und das Auswahlfeld automatisch geändert wird, um nur die Liste der Städte anzuzeigen, die mit dem Buchstaben beginnen. Danke für Ihre Hilfe! –

Staat und Stadt wählen Sie Feld wie nationale Gliederung Seite

Antwort

Verwandte Themen