フロントエンド開発で発生したいくつかの問題
1.選択したコンテンツを中央に表示するにはどうすればよいですか？
私は最近視覚化プロジェクトに取り組んでいます。ドロップダウンメニューがあり、非常に基本的な中央のディスプレイが実際に私を困惑させました。
text-align：centerを使用する最初のアイデアは機能しません。その後、もう一度パディングを試みましたが、効果があまり良くなく、すべてのアイテムが中央に表示されるわけではありませんでした。情報を調べた後、これらの2つの文を書いても大丈夫でした。
text-align: center;
text-align-last: center;
2.選択内のオプションをクリックして、オプションのグループを別の選択に追加します。jsで実装するにはどうすればよいですか。
本質的に、それは選択カスケードの問題であり、あまりナンセンスではありません、コードに行きます
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var arr = "请选择网关|金路热电偶采集项目|老科|主楼318|咖啡街|test1";
var arr0 = "请选择节点";
var arr1 = "请选择节点|热电偶采集卡1|热电偶采集卡2|热电偶采集卡3|热电偶采集卡4";
var arr2 = "请选择节点|老科一|老科二|老科三";
var arr3 = "请选择节点|主楼一|主楼二|主楼三";
var arr4 = "请选择节点|咖啡街一|咖啡街二";
var arr5 = "请选择节点|test01|test02|test03";
function AddOptions(dltObj, arrObj) {
dltObj.innerHTML = "";
var arrLocation = arrObj.split("|");
for (var i = 0; i < arrLocation.length; i++) {
var opt = document.createElement("OPTION");
dltObj.add(opt);
opt.value = i;
opt.text = arrLocation[i];
}
}
function init() {
AddOptions(dltGateway, eval('arr'));
AddOptions(dltNode, eval('arr' + dltGateway.selectedIndex));
}
</script>
</head>
<body onLoad="init();">
<table width="300" cellpading="0" cellspacing="0" border="0">
<tr>
<td width="100">
<select id="dltGateway" οnchange="AddOptions(dltNode,eval('arr'+dltGateway.selectedIndex));"style="width:100%"></select>
</td>
<td width="100">
<select id="dltNode" style="width:100%"></select>
</td>
</tr>
</table>
</body>
</html>
3.選択でさまざまなオプションをクリックしたときに、さまざまなコンテンツ（テキスト、表、echartsチャートなど）を表示するにはどうすればよいですか？
コアポイントは、オプションの値を取得し、その値を使用してさまざまなコンテンツの表示を制御することです。
おおよそのコードは次のとおりです。
var myNode = document.getElementById("dltNode"); //通过id获取select对象
var indexNode = myNode.selectedIndex; //获取被选中的Option的索引
var valueNode = myNode.options[indexNode].value; //获取被选中的Option选项的value值
var input=document.getElementById("car"); // 获取文本框input对象
input.value=valueNode；