2013-07-19 64 views
0

大家好我只是JavaScript的初學者。我試圖創建一個下拉組合。但由於某種原因,這是行不通的。下拉組合

此html代碼:

<select id="MapSelect" onchange="changeChart();"> 
<option value="developmentRegionMap">Development Region</option> 
<option value="ecoMap">Ecological Regions</option> 
<option value="world_mill_en">Districts</option> 
</select> 


<select id="dataSelect" onchange="changeChart();"> 
<option value="CASTE1">CASTE1</option> 
<option value="CASTE2">CASTE2</option> 
</select> 

這是JavaScript部分;

function changeChart() { 
    var data={} 
    var value = MapSelect.options[MapSelect.selectedIndex].value; 
    var dataType = dataSelect.options[dataSelect.selectedIndex].value; 

    if (value == "developmentRegionMap" && dataType == "CASTE1") { 
      data=CASTE1_Developmental; 
      alert("APPLE"); 
     } 
    else if (value == "developmentRegionMap" && dataType == "CASTE2") { 
      data=CASTE2_Developmental; 
      alert("BALL"); 

     } 

    else if (value == "ecoMap" && dataType == "CASTE1") { 
      data=CASTE1_Eco; 
      alert("CAT"); 
     } 

    else if (value == "ecoMap" && dataType == "CASTE2") { 
      data=CASTE2_Eco; 
      alert("DOG"); 
     } 

    else if (value == "world_mill_en" && dataType == "CASTE1") { 
      data=CASTE1_Districts; 
      alert("ELEPHANT"); 
     } 

    else if (value == "world_mill_en" && dataType == "CASTE2") { 
      data=CASTE2_CASTE2; 
      alert("HEN"); 
    } 

}; 

的的jsfiddle連結此代碼是: http://jsfiddle.net/4yd2F/2/

+0

什麼可能是不工作?你怎麼能說它不工作?也許你可以發佈一些錯誤? –

回答

1

需要物理檢索您要使用的DOM對象:

var mapSelect = document.getElementById('MapSelect'); 
var dataSelect = document.getElementById('dataSelect'); 

這裏是一個更新fiddle

正如Felix指出的,我建議的並不是您的主要問題。的另一個問題是,在不使用所述javascript對象類型正確:

錯:

var data = {}; 
data = meh; 

在這種情況下meh是不是一個有效標識符,因爲它沒有被定義爲變量也不是一個公認的標識符

正確:

data = { 
    myString: 'hello', 
    myArray: [] 
}; 
+1

所有主流瀏覽器都會爲ID爲元素生成全局變量。雖然我個人不喜歡這個,但這不是OP代碼的問題。 –

+0

哇,不是我經常學習新東西,謝謝:)。我會更新答案以反映其他問題 – epoch

1

你的jsfiddle演示不起作用,因爲

  1. changeChart功能不是全球性的,因此它不能被內聯事件處理函數中調用(控制檯顯示Uncaught ReferenceError: changeChart is not defined),

  2. 你在比較dataType針對不同的字符串長度超過CASTE1CASTE2,沒有一個if條件將永遠是真實的,

    您試圖訪問不存在
  3. 許多變量(例如Brahmins_DevelopmentalChhetri_Developmental)。

爲了解決這個問題,你在HTML文檔的頭部或身體直接不得不

  1. 將函數定義。在jsFiddle中,您可以通過在設置中選擇No wrap - in <xyz>來完成此操作。

  2. 比較第二個下拉值對,它實際上有價值觀,即CASTE1CASTE2(就像你在你張貼在這裏的代碼一樣,但不是在演示)。

  3. 定義要使用或不使用它們的變量。


大多數的這些東西很容易解決,如果你learn how to debug JavaScript