복붙노트

[JQUERY] jQuery를 : 채우는 데 가장 좋은 방법은 드롭 다운?

JQUERY

jQuery를 : 채우는 데 가장 좋은 방법은 드롭 다운?

해결법

  1. 1.안드레아스 GRECH는이 (대신 루프에있는 항목의이에 대한 참조를 참고) 사실입니다 ... 꽤 가까이 :

    안드레아스 GRECH는이 (대신 루프에있는 항목의이에 대한 참조를 참고) 사실입니다 ... 꽤 가까이 :

    var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});

  2. 2.

    $.getJSON("/Admin/GetFolderList/", function(result) {
    var options = $("#options");
    //don't forget error handling!
    $.each(result, function(item) {
        options.append($("<option />").val(item.ImageFolderID).text(item.Name));
    });
});

    내가 위하고있어 새로운 <옵션> 요소를 생성하고 옵션 목록에 추가된다 (옵션을 가정 할 요소 드롭 다운의 ID입니다.

    구문이 완벽하게되지 않을 수 있습니다 PS 내에서 자바 스크립트는 비트 녹슨

  3. 3.물론 - 메이크업 옵션 문자열과 사용 .join ( '')의 배열이 아니라 + =보다 루프를 때마다. 옵션의 많은 수를 처리 할 때 약간의 성능은 범프 ...

    물론 - 메이크업 옵션 문자열과 사용 .join ( '')의 배열이 아니라 + =보다 루프를 때마다. 옵션의 많은 수를 처리 할 때 약간의 성능은 범프 ...

    var options = [];
$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        options.push('<option value="',
          result[i].ImageFolderID, '">',
          result[i].Name, '</option>');
    }
    $("#theSelect").html(options.join(''));
});

    예. 나는 아직도 문자열 전체 시간을 일하고 있어요. 당신은 단지 몇 가지 옵션이있는 경우, 이제 ...는 DOM 조각을 구축하는 가장 빠른 방법이, 믿거 나 말거나, 정말 문제가되지 않습니다 - 스타일이 마음에 Dreas이 보여 기술을 사용합니다. 그러나 옵션의 충분한 수 ... 곰 마음에, 당신은 오히려 한 번만보다, 내가 2 번 * 브라우저의 내부 HTML 파서를 호출하고, 루프를 통해 DOM마다 수정. 당신은 특히 오래된 브라우저에서, 그것을 위해 지불하게 될 겁니다.

    참고 : 같이 정의는 지적 ImageFolderID와 이름이 제대로 인코딩되지 않은 경우이 무너져 버릴 것입니다 ...

  4. 4.아니면 :

    아니면 :

    var options = $("#options");
$.each(data, function() {
    options.append(new Option(this.text, this.value));
});

  5. 5.가장 빠른 방법은 이것이다 :

    가장 빠른 방법은 이것이다 :

     $.getJSON("/Admin/GetFolderList/", function(result) {
        var optionsValues = '<select>';
        $.each(result, function(item) {
            optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>';
        });
        optionsValues += '</select>';
        var options = $('#options');
        options.replaceWith(optionsValues);
    });

    이 링크에 따르면 DOM 삽입의 어떤 종류의 일을 할 때 하나의 요소 모든 것을 포장하기 때문에 가장 빠른 방법입니다.

  6. 6.나는이 JQuery와 사이트에서 작동하는 발견

    나는이 JQuery와 사이트에서 작동하는 발견

    $.getJSON( "/Admin/GetFolderList/", function( data ) {
  var options = $("#dropdownID");
  $.each( data, function(key, val) {
    options.append(new Option(key, val));
  });
});

  7. 7.나는 문서 조각을 사용하는 것이 DOM 요소의 각 삽입시 페이지 리플 로우를 피할 수 있기 때문에, 또한 잘 모든 브라우저 (심지어 IE 6)에서 지원하는 것 성능이 좋은 것을 읽었습니다.

    나는 문서 조각을 사용하는 것이 DOM 요소의 각 삽입시 페이지 리플 로우를 피할 수 있기 때문에, 또한 잘 모든 브라우저 (심지어 IE 6)에서 지원하는 것 성능이 좋은 것을 읽었습니다.

    VAR 단편 document.createDocumentFragment = (); () {(결과, 함수 .each $ fragment.appendChild ($ ( "<옵션 />").val(this.ImageFolderID).text(this.Name)[0]); }); $ ( "# 옵션") APPEND (단편).;

    나는 첫 번째 코스 CodeSchool의 자바 스크립트 모범 사례에 이것에 대해 읽어보십시오.

    여기에 서로 다른 접근 방식의 비교입니다, 덕분에 저자로 이동합니다.

  8. 8.ES6와 다른 접근 방식

    ES6와 다른 접근 방식

    fetch('https://restcountries.eu/rest/v1/all')
  .then((response) => {
    return response.json()
  })
  .then((countries) => {
    var options = document.getElementById('someSelect');
    countries.forEach((country) => {
      options.appendChild(new Option(country.name, country.name));
    });
  })

  9. 9.나는 selectboxes JQuery와 플러그인을 사용합니다. 그것은 당신의 예제로 바뀝니다 :

    나는 selectboxes JQuery와 플러그인을 사용합니다. 그것은 당신의 예제로 바뀝니다 :

    $('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);

  10. 10.

    $.get(str, function(data){ 
            var sary=data.split('|');
            document.getElementById("select1").options.length = 0;
            document.getElementById("select1").options[0] = new Option('Select a State');
            for(i=0;i<sary.length-1;i++){
                document.getElementById("select1").options[i+1] = new Option(sary[i]);
                document.getElementById("select1").options[i+1].value = sary[i];
            }
            });

  11. 11.나는 그것이 도움이되기를 바랍니다. 나는 보통 기능 대신 모든 코드 매번 쓰기 사용합니다.

    나는 그것이 도움이되기를 바랍니다. 나는 보통 기능 대신 모든 코드 매번 쓰기 사용합니다.

        $("#action_selector").change(function () {

        ajaxObj = $.ajax({
            url: 'YourURL',
            type: 'POST', // You can use GET
            data: 'parameter1=value1',
            dataType: "json",
            context: this,                
            success: function (data) {
                json: data              
            },
            error: function (request) {
                $(".return-json").html("Some error!");
            }
        });

        json_obj = $.parseJSON(ajaxObj.responseText);            

        var options = $("#selector");
        options.empty();
        options.append(new Option("-- Select --", 0));
        $.each(ajx_obj, function () {
            options.append(new Option(this.text, this.value));
        });
    });
});

  12. 12.

    function LoadCategories() {
    var data = [];
    var url = '@Url.Action("GetCategories", "InternalTables")';
    $.getJSON(url, null, function (data) {
        data = $.map(data, function (item, a) {
            return "<option value=" + item.Value + ">" + item.Description + "</option>";
        });
        $("#ddlCategory").html('<option value="0">Select</option>');
        $("#ddlCategory").append(data.join(""));
    });
}

  13. 13.

    function generateYears() {
                    $.ajax({
                        type: "GET",
                        url: "getYears.do",
                        data: "",
                        dataType: "json",
                        contentType: "application/json",
                        success: function(msg) {
                            populateYearsToSelectBox(msg);
                        }
                    });
}

function populateYearsToSelectBox(msg) {
  var options = $("#selectYear");
$.each(msg.dataCollecton, function(val, text) {
   options.append(
        $('<option></option>').val(text).html(text)
    );
});
}

  14. 14.여기에 내가 변화 한 예는 내가 얻을의 아이들이 첫 번째, 두 번째 선택에서 선택이다

    여기에 내가 변화 한 예는 내가 얻을의 아이들이 첫 번째, 두 번째 선택에서 선택이다

    jQuery(document).ready(function($) {
$('.your_select').change(function() {
    $.ajaxSetup({
        headers:{'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')}
    });

    $.ajax({
        type:'POST',
        url: 'Link',
        data:{
          'id': $(this).val()
        },
        success:function(r){
          $.each(r, function(res) {
                console.log(r[res].Nom);
                 $('.select_to_populate').append($("<option />").val(r[res].id).text(r[res].Nom));
            });
        },error:function(r) {
          alert('Error');
        }
    });
});

    });여기에 코드를 입력하시오

  15. 15.내가 jQuery를 사용하고 채우기 드롭 다운에 함수를 호출하고있다.

    내가 jQuery를 사용하고 채우기 드롭 다운에 함수를 호출하고있다.

    function loadDropDowns(name,value)
{
   var ddl = "#Categories";
   $(ddl).append('<option value="' + value + '">' + name + "</option>'");
}

  16. 16.다음은 id가 드롭 다운 목록을 채우는 JQuery와 방법은 "FolderListDropDown"입니다

    다음은 id가 드롭 다운 목록을 채우는 JQuery와 방법은 "FolderListDropDown"입니다

    $.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        var elem = $("<option></option>");
        elem.attr("value", result[i].ImageFolderID);
        elem.text(result[i].Name);
        elem.appendTo($("select#FolderListDropDown"));
     }
});

    17. from https://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 : 텍스트 상자에 "번호"를 전용 입력을 제한하는 가장 좋은 방법은 무엇입니까? (소수점 포인트를 허용)  (0) 2020.10.13
[JQUERY] jQuery를에 등가 인 String.format  (0) 2020.10.12
[JQUERY] jQuery를에 체크 박스 값을 가져옵니다  (0) 2020.10.12
[JQUERY] jQuery를 업로드 진행 및 AJAX 파일 업로드  (0) 2020.10.12
[JQUERY] 여러 조동사 오버레이  (0) 2020.10.12
,

티스토리툴바