여러 개의 옵션이있는 배열로 드롭 다운 선택하기

Question

상태로 드롭 다운을 채우려고하는 중이므로 옵션의 값은 두 문자 값이어야하고 옵션의 텍스트는 전체 주 이름이어야합니다. 아래 코드를 사용하면 0,1,2,3 ... 값을 반환하고 var의 모든 옵션을 텍스트로 반환합니다.

var states = ["Select State","","Alabama","AL","Alaska","AK","Arizona","AZ","Arkansas","AR",...]; 
$.each(states, function(val, text) { 
    $('#selector').append($('<option> </option>').val(val).html(text)) 
    }); 

Answer 1

대신 배열의 states에 대한 객체를 사용하여,이보십시오. 당신이 객체의 배열로 배열을 변경 한 경우

var states = { 
    "Select State":"", 
    "Alabama":"AL", 
    "Alaska":"AK", 
    "Arizona":"AZ", 
    "Arkansas":"AR" 
}; 
var val, text; 
for (text in states) { 
    val = states[text]; 
    $('<option/>').val(val).text(text).appendTo($('#selector')); 
}; 

http://jsfiddle.net/g59U4/

Answer 2

문제는 콜백 함수는 상기 어레이의 해당 인덱스의 값을 포함하는 현재 반복 (예를 들면 0, 1, 2 등) text의 인덱스를 포함 val에 .each 결과를 제공한다는 것이다.

은 아마 정상 for 루프 더 나을 것, 당신이 시도하고있는 무슨 달성하기

for(var i = 0; i < states.length; i+=2) { 
    $("#selector").append($('<option> </option>').val(states[i+1]).html(states[i])); 
} 

당신은 루프의 #selector 외부를 포함 jQuery 오브젝트 캐싱 오프 더 나은 것, 그래서 모든 반복을 찾지 않아도됩니다.

여기에 위의 working example이 있습니다.

또 다른 옵션은 상태 이름 또는 약어를 키로 사용하고 다른 키를 값으로 사용하여 배열 대신 개체를 사용하는 것입니다. 편집 : 마치 @ mblase75가 완료했습니다

Answer 3

글쎄, jQuery.each 함수 인수가 혼란 스럽습니다. 첫 번째는 배열의 값 인덱스이고 두 번째 값은 값 자체입니다. 당신이해야 할 일은 다음과 같습니다 :

$.each(states, function(index) { 
    if(index%2 > 0) { 
     //continue, basically skip every other one. Although there is probably a better way to do this 
     return true; 
    } 
    $('#selector').append($('<option> </option>').val(states[index+1]).html(states[index])) 
}); 

Answer 4

배열에 2 차원이 있다면 정말 간단합니다. 당신이 정말로 당신이 제시 한 1 차원 배열을 사용할 필요가 고려하면, 당신이 할 수 있습니다 :

var states = ["Select State","","Alabama","AL","Alaska","AK","Arizona","AZ","Arkansas","AR"]; 
for(var i=1; i<states.length; i+=2) { 
    $('#selector').append($('<option value="' + states[i] + '">' + states[i-1] + '</option>').val(val).html(text)) 
} 

Answer 5

: 같은 결과는하지만, 무엇을 그리고 당신이 실수로 이름이나 약어를 건너 뛸 경우 문제가 덜 가능성이있어 무엇을 더 분명 다음과 같이 할 수 있습니다.

var states = [{"text":"Select State","val":""},{"text":"Alabama","val":"AL"}]; //etc 
$.each(states, function(val, statedata) { 
    $('#selector').append($('<option> </option>').val(statedata.val).html(statedata.text)) 
}); 

이 변경은 매번 콜백으로 JavaScript 객체를 전달합니다. 객체는 text 및 val 속성을 가지고 있으며 statedata 매개 변수로 콜백에 전달됩니다. val 매개 변수는 선택 상자를 채울 필요가 없도록 배열의 현재 색인 위치를 보유합니다.

데모 - http://jsfiddle.net/sR35r/

Answer 6

는 I $ 아약스는 콜백의 결과로서 2 차원 배열로 선택 목록을 채우는 비슷한 상황이 ....

---

<form name="form" id="form"> 

<select name="state" id="state"> 
     <option value=''>State</option> 
</select> 

</form>