변수에 저장된 옵션에서 선택 상자 만들기

Question

변수에 저장된 옵션에서 선택 상자를 만들려고합니다 (값은 사용자에 따라 변경됩니다). 지금은

, 나는 그냥 내 자바 스크립트 파일에서이 변수와 함께 작동하도록 그걸 얻기 위해 노력하고있어 : HTML 파일에서

var resp = {"streams": [ {"sweet":"cookies"}, {"savory":"pizza"}]} 

, 나는 선택 ID가 "selectedStream"

방법을 선택 상자를 만들기 위해 html의 select id와 javascript의 변수를 모두 호출합니까?

아래와 같은 예를 보았지만 ID와 변수를 상자에 연결하는 방법을 모르겠습니다.

$("option:selected", myVar).text() 

나는 이것이 일관된 희망이었습니다! 감사합니다

Answer 1

당신이하려고하는 것은 'selectedStream'id로 화면의 기존 select 요소에 옵션 html 노드를 추가하는 것입니다. 'resp'변수의 데이터를 사용하여 추가 할 옵션 노드의 텍스트와 값을 채 웁니다. 이것이 맞다면, 나는 그 기능을 this jsfiddle로 구현했다. 자바 스크립트도 아래에 있습니다 :

$(function(){ 
    var resp = {"streams": [ {"sweet":"cookies", "savory":"pizza"}]}; 
    var streamData = resp.streams[0]; 
    var optionTemplate = "<option value=\"{0}\">{1}</option>"; 
    for(var key in streamData){ 
     var value = streamData[key]; 
     var currentOptionTemplate = optionTemplate; 
     currentOptionTemplate = currentOptionTemplate.replace("{0}", key); 
     currentOptionTemplate = currentOptionTemplate.replace("{1}", value); 
     $("#selectedStream").append($(currentOptionTemplate)); 
    } 
}); 

Answer 2

그 배열이 필요한가요? 당신은 그냥 그 객체 내에서 키를 표시하려는 경우 나는 루프에 대한 을 만들 것입니다 :

var resp = { "streams": {"sweet": "cookies", "savory": "pizza"} } 

for (property in resp.streams) { 
    $('#selectStream').append($('<option/>', {text: property, value: property})); 
} 

JSFiddle을 :http://jsfiddle.net/pWFNb/