지정된 인덱스에

Question

내가 같이 보입니다 선택 목록을 (라벨을 사용)를 선택하는 옵션을 추가 : 나는 옵션이 표시되는 순서를 제어 할 라벨을 사용하고

<select id="testSelect"> 
    <option value="option1" label="1">Option 1</option> 
    <option value="option3" label="3">Option 3</option> 
    <option value="option5" label="5">Option 5</option> 
</select>​ 

. 초기 선택 목록의 순서가 정확합니다 (누락 된 항목 임에도 불구하고).

이 선택 목록에 프로그래밍 방식으로 새 옵션을 추가하고 싶습니다. 나는 jquery select cheat sheet에 대한 링크가있는 this question을 찾았습니다. 나는이 후 새로운 옵션을 삽입 할 필요가 없습니다

$("#elementid option:eq(0)").after("<option value='4'>Some pears</option>" 

을하지만 :

이 치트 시트는 내가하고 싶은 것과 유사한 특정 인덱스에 옵션을 추가하려면 다음 코드를 제공합니다 (이러한 항목이 여러 번 제거되고 다시 추가 될 것이기 때문에) 특정 인덱스를 사용하려면 레이블 값에 따라 올바른 순서로 옵션을 삽입해야합니다. 방법 B는 예외가 발생 1 3 2 5

: 같은

$(function() { 
    $("#testSelect option:eq(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method A 
    $("#testSelect option:label(1)").after("<option value='option2' label='2'>Option 2</option>"); //Method B 
});​ 

방법 A 내 목록 보이게 목록의 두 번째 항목 이후에 새 항목을 삽입합니다 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: label

나는 두 가지를 시도

그러나, 방법 B는 일을해도, 나는 아직도 실제로는 존재하지 않는 경우도 있습니다 1의 레이블 옵션 때문에 문제가있는 것입니다. 내가 정말로하고 싶은 것은 레이블 주위에 특정 옵션 요소가 있는지 여부에 관계없이 목록의 올바른 위치에 새 옵션을 삽입하는 것입니다.

어떻게 생각하나요? jsfiddle

Answer 1

어때?

jsFiddle example

당신은 어디서든 새로운 옵션을 삽입 한 다음 바로 자신의 레이블 값에 따라 옵션을 정렬 할 수 있습니다.

$("#testSelect").append("<option value='option2' label='2'>Option 2</option>"); 

$("#testSelect option").sort(function(a, b) { 
    if ($(a).attr('label') < $(b).attr('label')) return -1; 
    if ($(a).attr('label') > $(b).attr('label')) return 1; 
    return 0; 
}).appendTo('#testSelect');​ 

Answer 2

당신은 속성 선택에 대한 []를 사용해야합니다. 현재 사용 가능한 선택기 그래서 http://api.jquery.com/category/selectors/

$("#testSelect option[label=yourvalue]").after("<option value='option2' label='2'>Option 2</option>"); //Method B 

$("#testSelect option[label=1]") // will grab <option value="option1" label="1">Option 1</option> 

그리고 새로운 옵션이 해당 요소 후

당신은 그에 따라 요소

$(function() {  
    $('#testSelect option') 
      .add($("<option value='option7' label='7'>Option 7</option>")) 
      .sort(function(a, b) { 
       return a.label < b.label ? -1 : a.label > b.label ? 1 : -1; 
      }).appendTo('#testSelect'); 
});​ 

정렬 할 수 있습니다를 삽입됩니다에 대해 읽을 수 있습니다

http://jsfiddle.net/5ksh7/