2014-01-23 6 views
3

스크롤 막대를 스크롤하면 레코드를 추가 할 수있는 asp.net mvc 드롭 다운 목록을 찾고 있는데요. 나는이 분야에 완전히 초보자이다. 어떤 사람이이 코드 또는 재사용 가능한 코드를 구현하는 방법에 대해 안내해 줄 수 있습니까?Asp.net mvc dropdownlist 스크롤에 항목 추가

스크롤 이벤트는 컨트롤러에 전달되며 레코드를 가져 와서 마지막 항목을 드롭 다운에 추가합니다. 나는 어떤 제안이 나

Here is what I tried to append to dropdown

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
    <option>11</option> 
</select> 

답변

8

JQuery와 코드

아래의 코드는 컨트롤러와 기록을 얻기 위해 아약스 호출을 사용하여 다음 때마다 스크롤 드롭 다운 정적 데이터를 추가하기위한

var mySelect = $('#mySelect'); 
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true; 

    mySelect.scroll(function (e) { 
    if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) 
    { 
     var scrollto=$(this).scrollTop(); 
     if (isPreviousEventComplete && isDataAvailable) {  
      isPreviousEventComplete = false; 
     $(".LoaderImage").css("display", "block"); 

     $.ajax({ 
      type: "GET", 
      url: 'Your url', 
      success: function (result) { 
        $.each(result, function(val, text) {    
    mySelect.append(
     $('<option></option>').val(val).html(text) 
    ); 
     }); 
      mySelect.scrollTop(scrollto); 

      isPreviousEventComplete = true; 

      if (result == '') //When data is not available 
       isDataAvailable = false; 

      $(".LoaderImage").css("display", "none"); 
      }, 
      error: function (error) { 
       alert(error); 
      } 
     }); 


     } 
       } 
    }); 

클릭 데모 링크 http://jsfiddle.net/sethuramanP/4pmKf/3/ 예를 드롭 다운하기로 결합입니다 끝납니다

+0

나는 드롭 다운 목록을 실제 드롭 다운 목록으로 보여 주려고하고 있으며 크기가 5 인 목록이 아닙니다. 우리는 어떤 문제가 있습니까? – Kurkula

2

또한 결과의 무한 스크롤을 지원이 JQuery Select을 시도 할 수있는 코드 로직을 처리하는 방법을 이해 할 수있을 것.