2012-08-08 134 views
0

我試圖顯示下拉菜單的「類別」和子類別。自從我使用javascript以來已經有幾年了,所以我遇到了一些問題。我只是沒有填充html選擇輸入的代碼。我不知道代碼是否過於簡單,或者如果我剛剛犯了一些小錯誤,但我似乎無法使它工作。也許有人可以告訴我我要出錯的地方。謝謝。根據以前的選擇顯示選擇選項

<html> 
    <select name="cat" id="menu1" class="menu"></select> 
    <select name="subcat" id="menu2" class="menu"></select> 
</html> 

<script type = "text/javascript"> 

    var data = { 
     "category":["sub-category"], 
     "music": ["sub-category","rock", "punk"], 
     "film": ["sub-categoy","comedy", "drama"], 
     "tv": ["sub-catery","sit-com", "soap opera"], 
    } 


    for (var i in data) { 
     $('#menu1').append('<option>' + i + '</option>'); 
    } 


    $('#menu1').change(function() { 
     var key = $(this).val(); 
     $('#menu2').empty(); 
     for (var i in data[key]) { 
      $('#menu2').append('<option>' + data[key][i] + '</option>'); 
     } 
    }).trigger('change'); 

</script> 
+1

你有什麼錯誤嗎? – 2012-08-08 09:56:54

回答

0

您已經發布了jQuery代碼。例如:$('#menu1')

所以一定要調用的腳本標籤jQuery庫,並放置一個jQuery塊像這裏面的所有這樣的代碼:

UPDATE

我已經固定的代碼讓它起作用。看到它在這裏的行動:http://jsfiddle.net/QYcMt/1/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type = "text/javascript"> 
    $(function() { 

     var data = { 
      "category":["sub-category"], 
      "music": ["sub-category","rock", "punk"], 
      "film": ["sub-categoy","comedy", "drama"], 
      "tv": ["sub-catery","sit-com", "soap opera"], 
     }; 


     $.each(data, function(key, value){    

      $('#menu1').append($('<option />').text(key)); 
     }); 


     $('#menu1').change(function() { 
      var key = $(this).val(); 
      $('#menu2').empty(); 
      for (var i in data[key]) { 
       $('#menu2').append('<option>' + data[key][i] + '</option>'); 
      } 
     }).trigger('change'); 

</script> 
+0

謝謝你解決了這個問題。我不知道你有這樣做。我欣賞後:) :) – user1559811 2012-08-08 10:07:09

0

該腳本可以運行之前的HTML元素在DOM?將你的Javascript包裝起來總是更好

$(function() { ...yourcode... }); 
+0

謝謝,我已經改變了它,這是很好的提醒這些事情,因爲我已經很多忘了:) – user1559811 2012-08-08 10:09:11

+0

不客氣,upvote讚賞! – 2012-08-08 10:16:19