做前端项⽬遇到的⼀些问题及解决办法
前端开发遇到的⼀些问题
eval是做什么的
⼀、怎样才能让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 = ateElement("OPTION");
dltObj.add(opt);
opt.value = i;
< = 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));"></select>
</td>
<td width="100">
<select id="dltNode" ></select>
</td>
</tr>
</table>
</body>
</html>
三、点击select⾥不同的option时如何显⽰不同的内容（⽂本、表格、echarts图表等）？
最核⼼的地⽅在于获取option的value值，通过value值去控制显⽰不同的内容⼤概代码如下：
var myNode = ElementById("dltNode");//通过id获取select对象
var indexNode = myNode.selectedIndex;//获取被选中的Option的索引
var valueNode = myNode.options[indexNode].value;//获取被选中的Option选项的value值var ElementById("car");// 获取⽂本框input对象
input.value=valueNode；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。