TextBox의 Text를 기반으로 ListBox의 ListItem을 선택하십시오.

Question

jquery를 사용하여 텍스트 상자에 입력 한 텍스트를 기반으로 ListBox에서 항목을 선택하려고합니다. 텍스트 상자에 입력 한 텍스트의 길이가 1보다 큰 경우 ListBox의 항목을 반복하고 각 항목의 값을 비교하고 텍스트 상자에 입력 된 숫자와 일치하는 경우 선택/강조 표시해야합니다. ListBox. 여기에 내가하고있는 일이 있지만 작동하지 않는 것 같습니다. ListBox ListItem은 데이터베이스에서 런타임에 채워집니다.

Asp.Net

<asp:TextBox ID="txtMediaCode" runat="server" MaxLength="2" Width="40px" /> 
<asp:ListBox ID="lsMediaCodes" runat="server" Width="296px" /> 

JQuery와는

는

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#txtMediaCode').keyup(function() { 
      if ($('#txtMediaCode').length > 1) { 
       $('#lsMediaCodes').each(function (i, option) { 

        if ($(option).val() == $('#txtMediaCode').val()) { 
         $(option).attr('selected', 'selected'); 
        } 

       }); 
      } 
     }); 

    }); 

</script> 

는

는 사람이 어떤 제안이 있습니까?

Answer 1

시도 -이 변화의 부부와 함께 코드입니다

$(document).ready(function() { 
    $('#txtMediaCode').keyup(function() { 
     console.log('in') 
     if ($('#txtMediaCode').val().length > 1) { 
      $('#lsMediaCodes > option').each(function(i, option) { 
       if ($(option).val() == $('#txtMediaCode').val()) { 
        $(option).attr('selected', 'selected'); 
       } 
      }); 
     } 
    }); 
}); 

-

• 은 이제 오히려에 얼마나 많은 요소보다 '#txtMediaCode'텍스트 상자 의 값의 길이를 확인 페이지
는
• 다음은 각 선택은 목록 자체

0123보다는 모든 옵션 요소를 선택합니다 $('#lsMediaCodes > option').each( 이 변경되었습니다

데모 - http://jsfiddle.net/rMW2b/1/

Answer 2

이 작업을 수행하려면 여러 가지 작업을 수행해야합니다. 첫째, 당신은 어떤 ASP.NET 제어를 위해 다음과 같이 선택기를 사용해야합니다 asp.net 컨트롤이 렌더링

$('#<%= lsMediaCodes.ClientID %>') 

는 것은 당신이 asp.net 컨트롤을 준 것과는 매우 다른 ID를 가지고 있습니다.

다음으로 각 목록 항목을 보유하고 ListBox 대신 HTML 요소를 선택하기 위해 ListBox에서 생성하는 html 요소를 확인해야합니다.

프로젝트에서 ASP.NET 컨트롤을 만들면 ASP.NET으로 렌더링되지 않고 HTML로 렌더링됩니다. 이 때문에 각 컨트롤이 javascript/jQuery를 사용하여 작업하고 싶은 것처럼 렌더링해야합니다. 이 같은

Answer 3

시도 뭔가 :

selectMediaCode = function(text){  
    $("#<%=lsMediaCodes.ClientID%> option[value='" + text + "']").attr("selected", "selected"); 
} 

편집

내가 당신도이 작업을 수행 할 수 있다고 생각 :

selectMediaCode ($("#<%txtMediaCode.ClientID%>").val()); 

selectMediaCode = function(text){  
    $("#<%=lsMediaCodes.ClientID%> option:contains('" + text + "')").attr("selected", "selected"); 
} 

또한 너무 이런 식으로 할 수

selectMediaCode = function(text){  
    $("#<%=lsMediaCodes.ClientID%>").val(text); 
}