前端开发遇到的一些问题
一、怎样才能让select里的内容居中显示？
最近在做一个可视化项目，有一个下拉菜单，很基本的一个居中显示居然把我难住了。
最开始的想法使用text-align:center这个方法行不通。然后又试了padding，这个效果不是很好，并不能让每一项都居中显示。经过查阅资料发现写这么两句话就ok了。
text-align: center;
text-align-last: center;
二、点击一个select里面的一个option，向另一个select添加一组option用js怎么实现？
本质上就是select级联问题，废话不多说，上代码
<!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>
三、点击select里不同的option时如何显示不同的内容（文本、表格、echarts图表等）？
最核心的地方在于获取option的value值，通过value值去控制显示不同的内容
大概代码如下：
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；