可视化到选择框中

Visualization into a select box

本文关键字：选择 可视化      更新时间：2023-09-26

我是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>

有人能帮我吗？？？

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

  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。

相关文章：