jQuery - 옵션을 Option 객체에 추가

Question

2 개의 선택 상자가 있습니다. 첫 번째 선택 상자가 두 번째 선택 상자를 변경합니다. 두 번째는 작은 변수 세트를 가질 수 있습니다.

내가 한 것은 페이지가로드 될 때 변수로 옵션을 저장할 때입니다.

var optionList = $('select[name="location"] option'); 

첫 번째 선택 상자가 변경 될 때. 나는 그 다음 switch 문에 첫 번째 선택 상자의 값과 일치하는 노크 및 상자 2.

case 'add': 
    $('select[name="location"] option').remove(); 
    $(optionList).each(function() { 
     $('select[name="location"]').append($(this)); 
    }); 
    $('select[name="location"] option:not(option[value="cart"])').remove(); 
break; 

이 모두 잘 작동을 선택하는 새로운 옵션을 추가 아래와 같이 뭔가.

지금해야 할 일은 optionList에 옵션을 추가하는 것입니다. 나는 둘 다 추가하고 후에 시험했다. Append는 마지막 옵션 안에 새로운 옵션을 추가합니다. After는 jQuery 오류를 발생시킵니다. 내가 어떻게 이런 짓을 한거야?

var html = '<option value="'+v+'">'+l+'</label>'; 
$(optionList).append(html); // Fails 
$(optionList).after(html); // jQuery error line 3 

Answer 1

첫째, 당신이 닫는 label 태그와 더불어, option 태그를 추가하는, 그것은해야한다 : 두 번째

var html = '<option value="'+v+'">'+l+'</option>'; 

, 당신이 모든 기존 옵션 다음에 새로운 옵션을 추가합니다 가지고있는 코드 (optionList은 모든 기존 option 요소의 배열입니다.

대신 당신은이처럼 select 요소를 추가해야합니다

$('select[name="location"]').append(html); 

Answer 2

$은 ('[이름 = "위치"] 옵션을 선택합니다'); 해당 선택의 일부인 옵션을 선택합니다. 그래서 $ (optionList) .append (html);을 할 때 결과 목록의 각 옵션에 "html"을 추가합니다.

개인적으로는 일반적으로 같은 것을 할 거라고 :

 
var $mySelect = $('select[name="location"]'); 
var optionList = $mySelect.find('option'); 
... 
$mySelect.append(html); 

을하지만 당신은 같은 것을 할 수 있습니다 :

 
var optionList = $('select[name="location"] option'); 
... 
optionList.filter(':first').parent().append(html); 

두 번째 옵션은 적지 확대됨입니다.

optionList는 document.forms 내의 선택 목록이 아닌 jQuery로 둘러싼 옵션 배열 (각각 jQuery로 래핑 된 옵션)이므로 optionList.push (html)가 작동하지 않았습니다.
optionList.push ($ (html))는 jQuery로 원시 DOM 요소 인 "html"을 래핑 했으므로 optionList에 다른 jQuery 랩핑 옵션을 추가하는 것이 었습니다. optionList.add ($ (html)) 대신에 문자를 저장할 수 있습니다. (조금 더 jQueryish가 될 수도 있습니다). 그러나 이들 중 하나는 "html"요소를 optionList 컬렉션에만 추가합니다. 실제로 "html"을 DOM에 추가하지는 않습니다.

마지막으로, 두 개의 사이드 노트 ... 우선, 루프에서하는 것처럼 추가하는 것은 정말 나쁜 생각입니다. 당신은 DOM을 치는 중이며 루프를 통해 매번 다시 칠하기도합니다. 당신은 훨씬 더 많은 옵션을 만든 다음,과 같은 일을합니다. jQuery.fn.append.apply ($ ('select [name = "location"]'), objectArray); 페이지에서 단일 히트 만 수행하고 다시 칠하기 만합니다. 자세한 내용은 http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly을 참조하십시오.

두 번째로, $ (optionList)는 중복되어 약간의 성능이 필요합니다. optionList는 이미 jQuery 객체입니다. 즉, $ ('select [name = "location"] option'). $ (optionList)는 optionList가 이미 jQuery 객체라는 사실을 깨닫기 위해 jQuery 생성자를 호출하고 내부적으로 optionList를 사용하여 실제로는 $ (optionList)의 사용을 jQuery로 변환합니다.