jsを使用してdatalistまたはselectにオプションを動的に追加する詳細な説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jsを使用してdatalistまたはselectにオプションを動的に追加する詳細な説明

May 19, 2018 pm 02:01 PM

javascript select

場合によっては、設定ファイルから情報を読み取り、それをユーザーのオプション (select のオプションなど) に追加する必要があることがあります。この記事では主に、js を使用して datalist または select にオプションを動的に追加する方法を説明します。は優れた参考値を持っています。皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

以下はこの種の状況の例です

内容は次のとおりです:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;鼠标点击时加载&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.8.3.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
选择城市:&lt;input type=&quot;text&quot; name=&quot;cname&quot; list=&quot;cities&quot;/&gt;&lt;br/&gt;
&lt;datalist id=&quot;cities&quot;&gt;
&lt;/datalist&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//需要添加的数据内容,可以通过ajax请求获取
var cities = [
{label:&quot;xian&quot;,value:&quot;西安&quot;},
{label:&quot;hubei&quot;,value:&quot;湖北&quot;},
{label:&quot;wuhai&quot;,value:&quot;武汉&quot;}
]; 
//获取datalist的dom
var ss = document.getElementById(&quot;cities&quot;);
//定义加载城市的函数
function loadcities(){
for(var i = 0;i &lt; cities.length; i ++){
var city = cities[i];
//纯js实现的方式
/*var op=document.createElement(&quot;option&quot;); 
op.setAttribute(&quot;label&quot;,city.label);
op.setAttribute(&quot;value&quot;,city.value); 
ss.appendChild(op);*/ 
//jquery实现的方式
$(&quot;#cities&quot;).append(&#39;&lt;option label=&quot;&#39;+city.label+&#39;&quot; value=&quot;&#39;+city.value+&#39;&quot;&gt;&lt;/option&gt;&#39;);
}
}
//页面加载完时加载此函数
window.onload = function(){
loadcities();
}
&lt;/script&gt;

ログイン後にコピー