2012-08-27 50 views
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> 

任何人都可以幫我嗎?

+0

「可視化」是什麼意思? – Jay

回答

1

有兩種方法可以解決您的問題。

  1. 第一個是在選擇時寫腳本標記。這個方法有點棘手,因爲涉及到一個json對象。
  2. 第二種方法是直接隱藏「可視化」,直到用戶進行選擇。這可以使用CSS輕鬆完成。

我用第二種方法。
生成的圖形被放置在與該ID「圖表-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 
} 

Here is a working demo不要忘記包括在您的網頁jQuery的。