JavaScript : 양식 필드로 배열 채우기

Question

JavaScript 및 HTML 양식 요소를 사용하여 배열을 채우고 구문 분석하려고합니다. 다음 테스트는 예상 결과를 생성합니다 ("Test1 Test2 Test3"이 대상 div에서 렌더링 됨). 다음 작업 테스트 코드는 다음과 같습니다

<div> 
    <span id="put-stuff-here"></span> 
    <span id="put-stuff-here2"></span> 
    <span id="put-stuff-here3"></span> 
</div> 

<script type="text/javascript"> 
    var itemSelected = { 'fields': [ 'Test1', 'Test2', 'Test3' ] } 
    document.getElementById('put-stuff-here').innerHTML = itemSelected.fields[0]; 
    document.getElementById('put-stuff-here2').innerHTML = itemSelected.fields[1]; 
    document.getElementById('put-stuff-here3').innerHTML = itemSelected.fields[2];  
    }) 
</script> 

을하지만, 나는 변수를 정의 할 때 양식 필드를 사용하여 "itemSelected"아무것도 대상 사업부에서 렌더링되지 않습니다. 다음은 작동하지 않는 코드입니다.

<div> 
    <form> 
     <select id="getItem"> 
      <option value="{ 'fields': [ 'Test1', 'Test2', 'Test3' ] }">ItemName</option> 
      <option value="{ 'fields': [ 'Test4', 'Test5', 'Test6' ] }">ItemName2</option> 
     </select> 
    </form> 
</div> 

<div> 
    <span id="put-stuff-here"></span> 
    <span id="put-stuff-here2"></span> 
    <span id="put-stuff-here3"></span> 
</div> 

<script type="text/javascript"> 
    $("#getItem").change(function() { 
     var itemSelected = $(this).val(); 
     document.getElementById('put-stuff-here').innerHTML = itemSelected.fields[0]; 
     document.getElementById('put-stuff-here2').innerHTML = itemSelected.fields[1]; 
     document.getElementById('put-stuff-here3').innerHTML = itemSelected.fields[2];  
    }) 
    .change(); 
</script> 

어떤 이유로 "itemSelected"에 전달 된 값이 배열로 처리되지 않습니다. 나는 여기 누군가가 일종의 표정을 짓고 아마도 해결책을 제시 할만큼 친절 해지기를 바라고 있습니다.

감사합니다,

-Michael

Answer 1

로는 당신이하고 싶은 일을하지 왜 인 문자열입니다. 나는 양식 값을 변경 좋을 것 :

<select id="getItem"> 
    <option value="Test1,Test2,Test3">ItemName</option> 
    <option value="Test4,Test5,Test6">ItemName2</option> 
</select> 

그런 다음 이벤트 핸들러를 수정

var itemSelected = $(this).val().split(','); 

그건 당신에게 당신의 배열을 줄 것이다. 그것은 fields이 끝까지 의미가 있다고 가정합니다. 다른 이유로 인해 여전히 필요하다면 배열을 itemSelected.fields에 할당하십시오.

Answer 2

select의 값이 string이며 jQuery.parseJSON을 사용할 수 있습니다 object A가 객체로 다시 설정하지 않는 때문에 작동하지 않는 이유는 .

변화 var itemSelected = $(this).val(); 양식에서 오는 값 var itemSelected = $.parseJSON($(this).val());