2012-12-26 2 views
0

1,2, .... 100의 값 집합으로 드롭 다운 목록을 채우고 싶습니다. 현재이 작업을 수행하고 있습니다. 일. 형태의 헤드 부배열의 값으로 드롭 다운 목록 옵션을 채울 수 없습니다.

<script type="text/javascript" src="./jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
    var select = document.getElementById("selectAge"); 
    var options = ["1", "2", "3", "4", "5"]; 
    for(var i = 0; i < options.length; i++) { 
     var opt = options[i]; 
     var el = document.createElement("option"); 
     el.textContent = opt; 
     el.value = opt; 
     select.appendChild(el); 
    }​ 
</script> 

, 그때 에서

, I는

<label>Age</label> 
<select id="selectAge"> 
    <option>Select your age</option>   
</select> 

드롭 다운 메뉴가 하나의 값으로 채워지지되어있다. 내 말은, 왜 그런 일이 일어나지 않는지 나는 이해하지 못한다. Java 스크립트 코드를 닫는 </body> 태그 바로 앞에 놓는 것일 수도 있습니다. DOM 태그가로드 된 후에 만 ​​채워지기로되어 있습니다. 하지만 나는 그것을 시도해도 효과가 없습니다.

+0

아마도'select' 요소가 아직 렌더링되지 않았습니다. 'console.log (select);'를 실행하고 그 안에 무엇이 있는지 살펴 봅니다. – Kyle

+0

카일이 맞다고 생각합니다. 페이지가 완전히로드되면 스크립트를 실행하십시오. – ama2

+0

페이지에서 jquery를 사용하고있는 것 같습니다. 문서가 [$ (document) .ready()] (http://docs.jquery.com/Tutorials:Introducing_$(doc) .ready()를 통해로드를 완료하면이 코드를 실행 해보십시오. – Ameen

답변

1
<html> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var selectAge = $("#selectAge"), 
     options = [1,2,3,4,5,6], 
     i; 
     for (i = 0; i < options.length; i++) { 
      $(selectAge).append("<option value='" + options[i] + "'>" + options[i] + "</option>"); 
     } 
    }); 
</script> 
<body> 
<lable>Age:</lable> 
<select id="selectAge"> 
    <option>Select your age</option> 
</select> 
</body> 
</html> 
1

Works just fine in a fiddle. jQuery를 사용하는 경우 DOM을 준비 할 때까지 기다리려면

$(function() { ... your code ...})` 

으로 전체를 래핑하십시오.

관련 문제