So fügen Sie mithilfe von js dynamisch eine Option zur Auswahl hinzu (ausführliches Tutorial)-js-Tutorial-php.cn

So fügen Sie mithilfe von js dynamisch eine Option zur Auswahl hinzu (ausführliches Tutorial)

亚连

Freigeben： 2018-06-09 14:37:41

Original

11207 Leute haben es durchsucht

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(&#39;<option label="&#39;+city.label+&#39;" value="&#39;+city.value+&#39;"></option>&#39;);
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
</script>

Nach dem Login kopieren

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!