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>

这是我的两个链接选择框。我试图从另一个文件中获取此代码，但出了点问题。在我做出第一选择之前，我还能让 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

有两种方法可以解决您的问题。

  1. 第一个是在进行选择时编写脚本标签。这种方法有点棘手，因为涉及到一个 json 对象。
  2. 第二个是简单地隐藏“可视化”，直到用户做出选择。这可以使用 CSS 轻松完成。

我使用了第二种方法。
生成的图形放置在 ID 为“chart-0”的 DIV 中，由于此 DIV 不可直接编辑，因此我使用 css 在页面加载时隐藏它，并在第二次选择时显示它，如下所示：

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

至于第二个选择，使用相同的方法。选择非默认选项时，将使用以下代码显示第二个选择：

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 回答