2011-01-10 1 views
1
<!DOCTYPE html> 
<html> 
    <script type="text/javascript" src="../jquery-1.4.4.min.js" /> 
    <script type="text/javascript">   
     function click(){ 
      var select = document.getElementById("select"); 
      var json = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]]; 
      json = JSON.parse(json); 
      select.options.length = 0; 
      for(var i=0; i<json.length; i++) { 
       $("#select").append(new Option(json[i][0], json[i][1], false, false)); 
      } 
     } 
    </script> 

    <body> 
     <select id="select"></select> 
     <input type="button" onclick="click()" /> 
    </body> 
</html> 

select 요소에 옵션을 추가하려고하지만 아무 소용이 없습니다.동적으로 추가 옵션을 선택하는 데 문제가 있습니다

+0

jQuery를 사용하지 않으므로 한 줄을 제외하고 JS를 사용하지 마십시오. – hunter

답변

3

실제로 JSON 데이터가 아니기 때문에 작동하지 않습니다.

var json = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]]; 
    // json = JSON.parse(json); 
    // ^-----Eliminate the second line. 

는 또한, 당신이 방법 이름 click을 사용하지 않아야합니다 : 자바 스크립트 배열입니다. 일부 브라우저에서는 방해가됩니다.

작업 예 :http://jsfiddle.net/hdX84/

+0

실례를 주셔서 감사합니다! jsfiddle에서 작동했지만 코드를 그대로 복사하면 작동하지 않았습니다. 여기에 다른 문제가 있습니까? 나는 이것을 테스트하기 위해 크롬을 사용하고 있습니다. – lowerkey

+0

@Joshua : 인라인 onclick' 속성에서 메소드의 이름을 변경하는 것을 잊지 않았습니까? 이 예제에서 일부 브라우저에서는'click '을 사용하지 못하기 때문에'click'에서'click_me'으로 변경했습니다. – user113716

+0

나는 option-adding-trigger를 위해 $ (document) .ready (...)로 click을 대체했다. – lowerkey

1

이것은 잘못된 것입니다 :

var json = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]]; 
json = JSON.parse(json); 

당신은 JSON이 없습니다. 배열이 인 배열이 있습니다. 작은 따옴표 (예 : 문자열 인 경우)로 묶인 경우에만 JSON이됩니다. $ ('선택') 항상 DOM을 검색 때문에

var data = [["Deutsch", "de-DE"], ["US Englisch", "en-US"]]; 
for(var i=0; i<data.length; i++){ 
    $("#select").append($('<option />',{value: json[i][1], text: json[i][0]})); 
} 
2

나는 더 많은 효율성을

var mySel = $('#select')[0]; 
for(var i=0; i<json.length; i++){ 
     mySel.append(whatever); 
    } 

을 할 것입니다. 10 개 항목에 대해서는별로 중요하지 않지만 큰 페이지에서는 시작부터 효율적으로 처리하려고합니다.

+1

DOM 객체에서'append()'를 호출 할 수 없습니다. 이는 jQuery 메서드입니다. jQuery selector의'[0]'get은 DOM 요소를 반환합니다. – hunter

+0

이 문제는 당면 문제를 다루지 않기 때문에 주석으로 게시되어야합니다. 귀하가 아직 답변을 드릴 담당자가 충분하지 않지만 Answers 섹션을 남용해서는 안됩니다. 당신이 코멘트하기 위해 단지 50 명의 담당자를 필요로하기 때문에, 오래 걸리지 않을 것입니다. – user113716

+0

오케이, thx. 다음에 그렇게하는 것을 잊지 않을 것입니다. – TiGoRn