Heim > Artikel > Web-Frontend > So fügen Sie mithilfe von js dynamisch eine Option zur Auswahl hinzu (ausführliches Tutorial)
So fügen Sie mithilfe von js dynamisch eine Option zur Auswahl hinzu (ausführliches Tutorial)
- 亚连Original
- 2018-06-09 14:37:4111096Durchsuche
Im Folgenden werde ich Ihnen eine Methode zur Verwendung von js zum dynamischen Hinzufügen von Optionen zur Datenliste oder zur Auswahl vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.
Manchmal ist es notwendig, Informationen aus der Konfigurationsdatei zu lesen und sie dann zu den Optionen des Benutzers hinzuzufügen, z. B. zur Option „Auswählen“. Hier ist ein Beispiel für eine solche Situation
Der Inhalt ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<title>鼠标点击时加载</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
选择城市:<input type="text" name="cname" list="cities"/><br/>
<datalist id="cities">
</datalist>
</body>
</html>
<script type="text/javascript">
//需要添加的数据内容,可以通过ajax请求获取
var cities = [
{label:"xian",value:"西安"},
{label:"hubei",value:"湖北"},
{label:"wuhai",value:"武汉"}
];
//获取datalist的dom
var ss = document.getElementById("cities");
//定义加载城市的函数
function loadcities(){
for(var i = 0;i < cities.length; i ++){
var city = cities[i];
//纯js实现的方式
/*var op=document.createElement("option");
op.setAttribute("label",city.label);
op.setAttribute("value",city.value);
ss.appendChild(op);*/
//jquery实现的方式
$("#cities").append('<option label="'+city.label+'" value="'+city.value+'"></option>');
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
</script>Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
AngularJS Zwei-Wege-Datenbindungsprinzip (ausführliches Tutorial)
Zugehörige Datenspeicherung und Werterfassung im WeChat-Applet Frage
Wie implementiert man den optimierten Stil in Vue (ausführliches Tutorial)
Wie erstellt man benutzerdefinierte globale Vue-Komponenten?
So implementieren Sie die mehrseitige Entwicklung in vue2.0
So implementieren Sie die Drag-Verifizierungscode-Funktion mit jQuery und vue
Das obige ist der detaillierte Inhalt vonSo fügen Sie mithilfe von js dynamisch eine Option zur Auswahl hinzu (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!