Some problems encountered in front-end development
1. How can the content in select be displayed in the center?
I'm working on a visualization project recently. There is a drop-down menu, and the very basic centered display actually stumped me.
The first idea to use text-align: center does not work. Then I tried padding again. The effect was not very good, and it didn't make every item displayed in the center. After looking up the information, it was ok to write these two sentences.
text-align: center;
text-align-last: center;
2. Click on an option in a select to add a group of options to another select. How to implement it with js?
In essence, it is the problem of select cascade, not much nonsense, go to the code
<!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. How to display different content (text, table, echarts chart, etc.) when clicking different options in select?
The core point is to get the value of the option, and use the value to control the display of different content. The
approximate code is as follows:
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；