자바 스크립트에서 출력 HTML 양식 요소

신참 질문과 같이 들릴 수 있도록 Javascript로 작업을 시작했습니다. 선택 양식 요소를 인쇄하고 싶습니다. 하지만 스크립트의 배열에서 옵션 목록에 액세스해야하므로 내 코드의 javascript 부분에서이 스크립트를 실행하고 있습니다. 나는이 select 요소를 출력하기 위해 HTML 부분에 div 요소를 사용했다. 내 코드는 다음과 같습니다.자바 스크립트에서 출력 HTML 양식 요소

<head> 
<script> 

    function currentWorlds() 
    { 
     var string="<select id='worldSelected'>"; 
     for(var i=0;i<universe.name.length;i++) 
     { 
      string+="<option value='"+i+"'>"+universe.name[i]+"</option>"; 
     } 
     string+="</select>"; 

     $('#universeOptions').html(string); 

    } 

    $(function(){ 
    currentWorlds(); 
    }); 


</script> 
</head> 

<body> 
<form>   
Select from current games: <br>   
<div id="universeOptions"></div> 
<input type="button" id="selectWorldButton" name="selectWorld" value="Select Game"> </br> 

</form> 
</body>

나는 문제가있는 것으로 보이는 관련 코드 만 포함 시켰습니다. 이 경우 유니버스는 이름이라는 배열 특성이있는 개체입니다. 이 이름은 사용자 입력에 따라 표시하고 처리하려는 옵션입니다. 내가 선택한 후 select 옵션의 id를 저장하지 못하는 것 같습니다. 즉, 내가 console.log에 worldSelected 값을 출력하면 0을 출력합니다. 새로운 옵션을 선택한 후에는 아무 것도 출력하지 않습니다. 제가 누락 된 것이 있습니까? 도움을 받으실 수 있습니다!

감사합니다.

출처

2014-04-19 Saima

당신이 선택한 세계를 로깅하는 코드를 추가 할 수 있습니까? 0은 첫 번째 요소를 선택한 결과 일 수 있습니다. 첫 번째 요소의 ID는 0입니다. 루프에서 0부터 시작하기 때문에 – Ritikesh

은 currentWorlds() 함수를 호출 한 직후에 주 javascript 함수에 있습니다. ' console.log ("선택한 세계"); \t \t \t \t console.log (document.getElementById ("worldSelected"). selectedIndex); ' – Saima

방금 게시 한 답변을 확인하십시오. – Ritikesh

Fiddle test here

보기 콘솔 로그를 JsBin

function currentWorlds(){ 
    var universe = { 
     name: ["Uni A","Uni B","Uni C","Uni D","Uni E","Uni F","Uni G"] 
    }; 
    var select = "<select id='worldSelected'></select>"; 
    $('#universeOptions').html(select); 
    for(var i=0;i<universe.name.length;i++){ 
     $('#worldSelected').append($("<option></option>") 
          .attr("value",i) 
          .text(universe.name[i])); 
    } 
} 

$(function(){ 
    currentWorlds(); 
    $('#worldSelected').change(function(){ 
     console.log($(this).val()); 
    }); 
});

출처

2014-04-19 10:14:17 TriniBoy

아무 것도 로그 아웃하지 않는 것 같습니다. – Saima

@Saima - 죄송합니다 Jsbin 링크를 업데이트했습니다 - http://jsbin.com/fikusalu/1/edit?html,js,console,output – TriniBoy

예! 그것은 작동합니다! 도와 주셔서 감사합니다. 또한 설명으로 사용 된 .append, .attr 및 .text 메서드는 ID를 조작하는 데 사용됩니까? 그들은 정확히 무엇을합니까? – Saima

이 코드는 jquery를 사용하여 선택한 값을 확인합니다.

$('#worldSelected').change(function(){ 
    console.log($(this).val()); 
});

새 값을 선택할 때마다 선택 상자의 값이 기록됩니다. currentWorlds 함수 정의 위에이 코드를 추가 할 수도 있습니다. 참고 : jquery 라이브러리를 추가해야합니다. 내가 게시 한 코드에서 알 수 있듯이 jquery를 사용했습니다. 그래서 당신이 파일에 링크했다고 가정합니다.

나는이 시도 ... 코드를 조금 편집하고 작동하는지 알려 것

출처

2014-04-19 10:03:36 Ritikesh

코드에 추가했는데 아무것도 기록하지 않습니다. 내가 선택한 옵션에 따라 worldSelected id에 값이 지정되지 않은 것처럼 보입니다. – Saima

선택 상자를 마우스 오른쪽 버튼으로 클릭하고 검사 요소를 클릭합니다. 개발자 도구에서 페이지의 원시 html 코드를 찾을 수 있습니다. 옵션과 선택 상자에 ID가 지정되었는지 확인하십시오. – Ritikesh

div를 사용하여 select 요소를 문자열로 출력하여 명확하게하기 위해 HTML 요소처럼 정상적으로 작동합니까? 아니면 사용자의 입력을 받아 들일 수 있도록 다른 방식으로 조작해야합니까? – Saima

에 당신이 직접 사용할 수 있습니다 당신의 코드에서 :

function currentWorlds() 
    { 
     var string = document.createElement('select'); 
     string.setAttribute('id', 'worldSelected'); 
     var string1; 

     for(var i=0;i<universe.name.length;i++) 
     { 
      string1 = document.createElement('option'); 
      string1.value = i; 
      string1.text = universe.name[i]; 
      string.appendChild(string1); 
     } 

     document.getElementById('universeOptions').appendChild(string); 

    }

출처

2014-04-19 10:40:57

자바 스크립트에서 출력 HTML 양식 요소

답변

관련 문제