gpt4 book ai didi

javascript - 可视化到一个选择框

转载 作者:行者123 更新时间:2023-11-29 15:45:29 27 4
gpt4 key购买 nike

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

至于第二个select,使用了同样的方法。选择非默认选项时,将使用以下代码显示第二个选择:

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
}

Here is a working demo并且不要忘记在您的页面中包含 jquery。

关于javascript - 可视化到一个选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12143818/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com