프런트 엔드 개발에서 발생하는 몇 가지 문제
1. 선택한 콘텐츠가 중앙에 어떻게 표시 되나요?
최근에 시각화 프로젝트를 진행하고 있는데 드롭 다운 메뉴가 있는데 매우 기본적인 중앙 디스플레이가 실제로 저를 당혹스럽게했습니다.
text-align : center를 사용하는 첫 번째 아이디어는 작동하지 않습니다. 그런 다음 다시 패딩을 시도했는데 효과가 좋지 않았고 모든 항목이 중앙에 표시되지 않았습니다. 정보를 찾아 본 후이 두 문장을 써도 괜찮 았습니다.
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；