3

私はjavascriptを初めて使用し、ビジュアライゼーションのコードをselection02の選択ボックスに入れようとしています。私の視覚化コード：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AihqKzH-MgAndERnaFVsYk1RLUM3S0pDSmNjcEQ4M1E&transpose=0&headers=0&range=A2%3AB13&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}}],"booleanRole":"certainty","animation":{"duration":0},"useFirstColumnAsDomain":true,"hAxis":{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},"isStacked":false,"width":454,"height":285},"state":{},"chartType":"AreaChart","chartName":"\u0393\u03c1\u03ac\u03c6\u03b7\u03bc\u03b1 1"} </script>

これらは私の2つのリンクされた選択ボックスです。別のファイルからこのコードを取得しようとしましたが、問題が発生しました。また、最初の選択をするまでselectbox2を非表示にすることはできますか？ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function allagi()
{
   if (document.getElementById("selection01").selected==true)
   {

   }
   else if (document.getElementById("selection02").selected==true)
   {

   }
   else if (document.getElementById("selection03").selected==true)
   {

   }
   else if (document.getElementById("selection04").selected==true)
   {

   }
}

function allagi2()
{
     if (document.getElementById("select02").selected==true)
     {
         document.getElementById("selectbox01").disabled=false;
     }
}

</script>

</head>



<body>

<div id="wrapper">
  <div id="logo">

  <select onchange="allagi2()">
  <option id="select01" selected="true">Επιλέξτε</option>
  <option id="select02">Τουρισμό</option>
  <option id="select03">Προϋπολογισμό</option>
  </select>

  <select id="selectbox01" onchange="allagi()" disabled="true">
  <option id="selection01">Selection01</option>
  <option id="selection02">Selection02</option>
  <option id="selection03">Selection03</option>
  <option id="selection04">Selection04</option>
  </select>
</div>
  <div id="chart">



  </div>
</div>

</body>
</html>

誰かが私を助けることができますか？

4

1 に答える 1

1

問題を解決するには 2 つの方法があります。

  1. 1 つ目は、選択が行われたときにスクリプト タグを書き込むことです。json オブジェクトが関係しているため、このアプローチは少し注意が必要です。
  2. 2 つ目は、ユーザーが選択するまで「視覚化」を単純に非表示にすることです。これは CSS を使用して簡単に行うことができます。

私は2番目のアプローチを使用しました。
生成されたグラフは、ID「chart-0」の DIV に配置されます。この DIV は直接編集できないため、css を使用して、ページの読み込み時に非表示にし、2 番目の選択が行われたときに表示するようにしました。

else if (document.getElementById("selection02").selected == true) {
    $('#chart-0').css('display', 'block') //show chart if 2nd option is selected

2 番目の選択に関しては、同じアプローチが使用されます。デフォルト以外のオプションが選択されている場合、次のコードを使用して 2 番目の選択が表示されます。

if ($('#option1').val() != 'Επιλέξτε') {
    $('#selectbox01').css('display', 'block'); //show second option
 } else if ($('#option1').val() == 'Επιλέξτε') { //hide is user reselects default option
    $('#selectbox01').css('display', 'none'); //hide option
    $('#chart-0').css('display', 'none'); //hide chart
 }

これは動作するデモです。ページに jquery を含めることを忘れないでください。

于 2012-11-18T16:33:27.427 に答える