표시 이전 선택 사항을 기반으로 옵션 선택

'category'와 하위 범주의 드롭 다운 메뉴를 표시하려고합니다. 자바 스크립트를 사용한 지 몇 년이 지났기 때문에 몇 가지 문제가 있습니다. 코드는 단순히 html select 입력을 채우지 않았습니다. 코드가 너무 단순한 지 또는 방금 작은 오류가 발생했는지는 알 수 없지만 제대로 작동하지 않는 것 같습니다. 어쩌면 누군가 내가 잘못 가고있는 곳을 보여줄 수 있습니다. 감사.표시 이전 선택 사항을 기반으로 옵션 선택

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

출처

2012-08-08 user1559811

오류가 있습니까? –

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>

출처

2012-08-08 09:54:25 Faust

문제를 해결해 주셔서 감사합니다. 네가 그렇게했는지 나는 몰랐다. 나는 게시물을 주셔서 감사합니다 :) – user1559811

스크립트가 실행 될 수있는 HTML 요소는 DOM에 전에? 자바 스크립트를 항상 랩하는 것이 더 좋습니다.

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

출처

2012-08-08 09:56:19

덕분에, 내가 그것을 변경했습니다, 내가 잊어 버린만큼 이러한 것들을 떠올리게하는 것이 좋다 :) – user1559811

당신은 환영합니다, upvote 감사! –

표시 이전 선택 사항을 기반으로 옵션 선택

답변

관련 문제