javascript - 의미 - jquery 사용법




jQuery를 사용하여 JS 객체로 선택 항목을 추가하는 가장 좋은 방법은 무엇입니까? (20)

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

바닐라 자바 ​​스크립트

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

jQuery를 사용하여 JavaScript 객체에서 <select> 옵션을 추가하는 가장 좋은 방법은 무엇입니까?

나는 플러그인을 할 필요가없는 것을 찾고 있는데 거기에있는 플러그인에도 관심이있다.

이것이 내가 한 일이다.

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

깨끗하고 간단한 해결책 :

이것은 정리되고 정리 된 matdumsa 버전입니다 :

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

matdumsa의 변경 사항 : (1) append () 내의 옵션에 대한 닫기 태그를 제거하고 (2) append ()의 두 번째 매개 변수로 속성 / 속성을 맵으로 이동했습니다.


  1. $.each 루프는 for 루프보다 느립니다.
  2. 매번, DOM 선택은 루프 $("#mySelect").append(); 에서 모범 사례가 아닙니다 $("#mySelect").append();

따라서 가장 좋은 해결책은 다음과 같습니다.

JSON 데이터 resp

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

그것으로 사용하십시오

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

$ .map () 함수를 사용하면보다 우아한 방법으로이 작업을 수행 할 수 있습니다.

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

@ 조쉬 페리

일반 .append 도 예상대로 작동합니다.

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

JSON 형식 :

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

그리고 jQuery 코드를 사용하여 Ajax 성공시 Dropdown에 값을 채 웁니다.

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

forwarned ... Android 2.2 (Cyanogen 7.0.1) 전화 (T-Mobile G2)에서 PhoneGap 1.0.0과 함께 jQuery Mobile 1.0b2를 사용하고 있으며 .append () 메소드를 전혀 사용할 수 없습니다. 다음과 같이 .html ()을 사용해야했습니다.

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);


간단한 방법은 다음과 같습니다.

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

나는 두 가지 최상의 답을 훌륭한 대답으로 결합한다.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

나는 이것이 간단하고 훌륭하게 작동한다는 것을 알았다.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

어디서나 동일한 코드를 반복하는 것이 아니라 다음과 같이 jQuery 함수를 작성하는 것이 더 바람직하다는 것을 제안합니다.

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

그런 다음 옵션을 추가하려면 다음을 수행하십시오.

$('select').addOption('0', 'None');

이 모든 대답은 불필요하게 복잡해 보입니다. 필요한 것은 :

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

그건 완전히 크로스 브라우저 호환됩니다.


이것은보기에 좋고, 가독성을 제공하지만 다른 방법보다 느립니다.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

속도를 원한다면 가장 빠른 (테스트 된) 방법은 배열을 사용하고, 문자열 연결을 사용하지 않고 하나의 추가 호출 만 사용하는 것입니다.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

이것이 2 차원 배열에서 한 것입니다. 첫 번째 열은 항목 i이고 <option> innerHTML 에 추가됩니다. 두 번째 열은 record_id i이고, <option>value 에 더합니다.

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
    $items_arr = array();
    $i = 0;
    foreach ($items as $item)
    {
        $first_name = $item->first_name;
        $last_name = $item->last_name;
        $date = $item->date;
        $show = $first_name . " " . $last_name . ", " . $date;
        $request_id = $request->request_id;
        $items_arr[0][$i] = $show;
        $items_arr[1][$i] = $request_id;
        $i++;
    }
    
    echo json_encode($items_arr);
    
  2. JavaScript / Ajax

            function ddl_items() {
                if (window.XMLHttpRequest) {
                    // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // Code for Internet Explorer 6 and Internet Explorer 5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var arr = JSON.parse(xmlhttp.responseText);
                    var lstbx = document.getElementById('my_listbox');
    
                    for (var i=0; i<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }
    

이전 답변은 모두 유효한 답변이지만 다음을 모두 documentFragmnet에 추가 한 다음 해당 문서 조각을 요소로 추가하는 것이 좋습니다.

이 문제에 대한 존 레지그 (John Resig)의 생각을 ...

의 라인을 따라 뭔가 :

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

현재 jQuery 코어에 포함시키기위한 제안하에있는 Microsoft 템플릿 접근 방식을 사용하는 방법이 있습니다. 템플리트를 사용하는 데 더 많은 능력이 있으므로 가장 간단한 시나리오의 경우 최상의 옵션이 아닐 수도 있습니다. 자세한 내용은 Scott Gu의 게시물에서 기능을 간략하게 설명합니다.

먼저 github 에서 제공하는 템플릿 js 파일을 포함하십시오.

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

다음으로 템플릿 설정

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

그런 다음 데이터를 사용하여 .render () 메소드를 호출하십시오.

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

나는이 접근법을 좀 더 자세하게 blogged .


 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

몇 가지 테스트를 해봤는데이 작업이 가장 빠르다고 믿습니다. :피


$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

jQuery 1.4.1에서 잘 작동합니다.

ASP.NET MVC 및 jQuery에서 동적 목록을 사용하기위한 전체 기사는 http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx 하십시오.


if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

이것은 거대한 문자열을 처음 구축 한 후에 DOM을 한 번만 조작합니다.





html-select