先端プロジェクトで出会ったいくつかの問題と解決方法をします.
10596 ワード
フロントエンド開発で発生したいくつかの問題一、selectの内容を中央に表示するにはどうすればいいですか? 二、1つのselectの中の1つのoptionをクリックして、別のselectに1組のoptionを追加してjsでどのように実現しますか? 三、selectの異なるoptionをクリックすると、どのように異なる内容(テキスト、表、echartsグラフなど)を表示しますか?
一、selectの内容を中央に表示するにはどうすればいいですか?
最近可視化プロジェクトをしていて、ドロップダウンメニューがあって、基本的な中央表示が私を困らせました.最初のアイデアはtext-align:centerという方法では通用しません.そしてpaddingを試してみましたが、この効果はあまりよくなく、すべての項目を中央に表示することはできません.資料を調べたところ、こんな2つの言葉を書くとokになった.
二、一つのselectの中の一つのoptionをクリックして、もう一つのselectに一つのoptionを追加してjsでどのように実現しますか?
本質的にselectカスケード問題で、くだらないことは言わないで、コードをつけます
三、selectの異なるoptionをクリックすると、どのように異なる内容(テキスト、表、echartsグラフなど)を表示しますか?
最も核心的なところはoptionのvalue値を取得し、value値によって異なるコンテンツの概略コードを表示することを制御することです.
一、selectの内容を中央に表示するにはどうすればいいですか?
最近可視化プロジェクトをしていて、ドロップダウンメニューがあって、基本的な中央表示が私を困らせました.最初のアイデアはtext-align:centerという方法では通用しません.そしてpaddingを試してみましたが、この効果はあまりよくなく、すべての項目を中央に表示することはできません.資料を調べたところ、こんな2つの言葉を書くとokになった.
text-align: center;
text-align-last: center;
二、一つのselectの中の一つのoptionをクリックして、もう一つのselectに一つのoptionを追加してjsでどのように実現しますか?
本質的にselectカスケード問題で、くだらないことは言わないで、コードをつけます
<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の異なる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；