jQuery에서 선택 태그에 옵션 태그 추가

7973 단어 jQuery
예를 들어 <select class="my-select" multiple>의select 라벨에
jQuery를 사용하여 option 태그를 추가합니다.
var characters = {
        yuno: 'ゆの',
        miyako: '宮子',
        sae: '沙英',
        hiro: 'ヒロ',
        nori: '乃莉',
        nazuna: 'なずな'
    },
    $select = $('.my-select'),
    $option,
    isSelected;

$.each(characters, function (value, name) {
    isSelected = (value === 'miyako' || value === 'nori');
    $option = $('<option>')
        .val(value)
        .text(name)
        .prop('selected', isSelected);
    $select.append($option);
});
val 방법에서value 속성을 사용하고 text 방법에서 텍스트를 사용합니다
prop 방법에서 임의의 속성 (이 예에서selected 속성) 을option 표시로 설정합니다.
그리고 append 방법을 사용하여 옵션 표시를select 표시에 추가합니다.

됐어요!٩( 'ω' )و////

보충하여 기록하다


@takeyuichi선생님께서 저에게 건의를 하셨습니다.정말 감사합니다.
  • 태그를 생성할 때 객체에 속성을 지정할 수 있습니다.( 참고 자료 )
  • 순환 내에 DOM 요소를 추가하는 비용이 높기 때문에 순환 외에 추가한다.( 참고 자료 )
  • 이상의 건의에 따라 원본 코드를 업데이트해 보았습니다.
    var characters = {
            yuno: 'ゆの',
            miyako: '宮子',
            sae: '沙英',
            hiro: 'ヒロ',
            nori: '乃莉',
            nazuna: 'なずな'
        },
        $select = $('.my-select'),
        $option,
        options,
        isSelected;
    
    // コールバック関数の引数の順序が $.each と異なることに注意。
    options = $.map(characters, function (name, value) {
        isSelected = (value === 'miyako' || value === 'nori');
        $option = $('<option>', { value: value, text: name, selected: isSelected });
        return $option;
    });
    
    $select.append(options);
    

    좋은 웹페이지 즐겨찾기