HTML - Eine sauberere Art zu verwenden, wählen Sie Option

Ich habe ein Problem, wo ich brauche eine schönere Weise zu verwenden, wählen Sie die Option, die Länder (240+ Länder) bietet. Ich plane, select2 zu verwenden, um die suchende Erfahrung zu erhöhen. nun eine regelmäßige Select-Option mit einigen Werten in es wird aussehen wie dieseHTML - Eine sauberere Art zu verwenden, wählen Sie Option

<select> 
    <option value=..></option> 
<select>

Aber im Fall der Nationalität der Auswahl gibt es 240+ Länder und plötzlich ein schönes Stück Code wie dies schrecklich aussehen .

<div class="form-group"> 
    <label for="alias" class="col-sm-2 control-label">Alias</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="dob" class="col-sm-2 control-label">DoB</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth"> 
    </div> 
</div> 
<! 240++ lines worth of options->

Irgendwelche Eingaben?

Quelle

2016-07-12 Kei

Warum Sie nicht speichern Details der Länder in JSON-Datei oder XML oder DB. Holen Sie dann alle Daten mit nur einer Schleife? – Rohit

Haben Sie eine spezifische Frage? –

Sie können JQuery und Array() für diese Art von Dingen auf irgendeine Weise verwenden. Geben Sie einfach die Länder ein, die in var countries angezeigt werden sollen. Es wird jedoch einfacher sein, eine .cvs-Datei zu erstellen, die alle Ländernamen in der Datenbank enthält, und sie von dort aus aufzurufen. Wie auch immer diese JQuery-Quelle für Ihre Frage hilfreich sein könnte.

$(document).ready(function(){ 
 
\t var countries = new Array(); 
 
\t /* here you put all the countries you want in array */ 
 
\t countries = ["Korea", "USA", "China", "India", "etc"]; 
 
\t 
 
\t for(i = 0;i < countries.length;i++) { 
 
\t \t $("#select2").append("<option value='"+countries[i]+"'>"+countries[i]+"</option>"); 
 
\t } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<title>test</title> 
 
</head> 
 
<div class="form-group"> 
 
    <label for="alias" class="col-sm-2 control-label">Alias</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias"> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="dob" class="col-sm-2 control-label">DoB</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth"> 
 
    </div> 
 
</div> 
 

 
<!-- 240++ lines worth of options --> 
 
<div class="form-group"> 
 
    <label for="select2" class="col-sm-2 control-label">Select Country</label> 
 
    <div class="col-sm-10"> 
 
    \t <!-- this is where countries enters --> 
 
    \t <select name="" id="select2"> 
 
    \t </select> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2016-07-12 06:01:04

HTML - Eine sauberere Art zu verwenden, wählen Sie Option

Antwort

Verwandte Themen