Làm thế nào có thể chọn kết quả tải xuống thả xuống qua AJAX

Question

Tôi có một hộp select2 đơn giản tải một menu thả xuống.

Nhưng cách tốt nhất để tải lại trình đơn thả xuống mỗi khi menu được chọn được mở bằng kết quả cuộc gọi AJAX là gì? Cuộc gọi ajax sẽ trở

<option value=1> 
<option value=2> 

và vân vân

Tôi đã nhìn qua các ví dụ AJAX trên các tài liệu Select2 nhưng có vẻ một chút overcomplicated cho những gì tôi cần. TIA

Answer 1

Xem Tải dữ liệu từ xa ví dụ trên Select2 webpage.

Nó sẽ tải các tùy chọn trong danh sách chọn động bằng ajax mỗi lần mở.

$("#e6").select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
      url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
      dataType: 'jsonp', 
      data: function (term, page) { 
       return { 
        q: term, // search term 
        page_limit: 10, 
        apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
       }; 
      }, 
      results: function (data, page) { // parse the results into the format expected by Select2. 
       // since we are using custom formatting functions we do not need to alter remote JSON data 
       return {results: data.movies}; 
      } 
     } 
    }); 

Answer 2

Giả sử u có html

<p> 
    Hidden field value set in the following format: 
    <br /> 
    <em>'34:Donnie Darko,54:Heat,27:No Country for Old Men' 
    </em></p> 
<input type='hidden' id="e6" style="width: 500px;" value="34:Donnie Darko,54:Heat,27:No Country for Old Men" /> 
<br /> <button id="save">Save</button> 
<p> 
After it's initialised, the hidden field value will change to:<br /> 
<em>'34,54,27'</em> 
<br /> 
That is the value sent to the server 
</p>​ 

và cho Select2 Ajax

function MultiAjaxAutoComplete(element, url) { 
    $(element).select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     multiple: true, 
     id: function(e) { return e.id+":"+e.title; }, 
     ajax: { 
      url: url, 
      dataType: 'json', 
      data: function(term, page) { 

       return { 
        q: term, 
        page_limit: 10, 
        apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey 
       }; 
      }, 
      results: function(data, page) { 
       alert(data); 
       return { 
        results: data.movies 
       }; 
      } 
     }, 
     formatResult: formatResult, 
     formatSelection: formatSelection, 
     initSelection: function(element, callback) { 
      var data = []; 
      $(element.val().split(",")).each(function(i) { 
       var item = this.split(':'); 
       data.push({ 
        id: item[0], 
        title: item[1] 
       }); 
      }); 
      //$(element).val(''); 
      callback(data); 
     } 
    }); 
}; 

function formatResult(movie) { 
    return '<div>' + movie.title + '</div>'; 
}; 

function formatSelection(data) { 
    return data.title; 
}; 



MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json'); 

$('#save').click(function() { 
    alert($('#e6').val()); 
}); 

Hãy thử làm multiajax gọi với điều này! Tham khảo - http://jsfiddle.net/JpvDt/112/

Answer 3

Hãy thử điều này:

$(document).ready(function() { 
     $('#Registration').select2({ 
      placeholder: 'Select a registration', 
      allowClear: true, 
      ajax: { 
       quietMillis: 10, 
       cache: false, 
       dataType: 'json', 
       type: 'GET', 
       url: '@Url.Action("GetItems", "ItemsController")', //This asp.net mvc -> use your own URL 
       data: function (registration, page) { 
        return { 
         page: page, 
         pageSize: 100, 
         registration: registration, 
         otherValue: $("#OtherValue").val() // If you have other select2 dropdowns you can get this value 
        }; 
       }, 
       results: function (data, page) { 
        var more = (page * pageSize) < data.total; // whether or not there are more results available 
        return { results: data.dataItems, more: more }; // notice we return the value of more so Select2 knows if more results can be loaded 
       } 
      }, 
      formatResult: FormatResult, 
      formatSelection: FormatSelection, 
      escapeMarkup: function (m) { return m; } 
     }); 
    }); 

    function FormatResult(item) { 
     var markup = ""; 
     if (item.name !== undefined) { 
      markup += "<option value='" + item.id + "'>" + item.name + "</option>"; 
     } 
     return markup; 
    } 

    function FormatSelection(item) { 
     return item.name; 
    } 

Answer 4

Nếu bạn đang cố gắng để hiển thị thả xuống với JSON được nạp sẵn theo mặc định, vì vậy thời điểm bạn bấm vào nộp bạn mong đợi thả xuống với dữ liệu dân cư để hiển thị, mà không cần nhập vào một chữ cái, hãy đặt minimumInputLength: 0 và hoạt động như một nét duyên dáng.

Nó kích hoạt JSON giống như nếu nhiệm vụ của bạn là "tải JSON lên tiêu điểm bằng select2".

Tôi đã thêm mã nhưng do không thể sử dụng AJAX để truy xuất JSON từ xa trong đoạn mã mà tôi không thể tạo đoạn mã hoạt động.

Hãy nhớ rằng, đây là giải pháp bạn thêm vào mã của bạn không sử dụng một giải pháp được liệt kê bên dưới. Tôi sử dụng nó để mô tả sửa chữa.

---

$(".myContainer").select2({ 
    ajax: { 
     url: 'myJSONpath', 
     dataType: 'json', 
     delay: 250, 
     data: function(params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
     }, 
    minimumInputLength: 0, // so here is a trick 0 will trigger ajax call right when you click on field 
    processResults: function(data, params) { 
     //process your results 
    }, 

.... và như vậy một tiếp tục với các tài sản khác của bạn ...