TextBoxのテキストに基づいて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要素を調べる必要があります。

プロジェクトでASP.NETコントロールを作成すると、ASP.NETとしてレンダリングされず、HTMLとしてレンダリングされます。このため、javascript/jQueryを使用して操作する場合と同様に、各コントロールのレンダリングの内容を把握する必要があります。

Answer 3

このような何かを試してみてください：

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

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

あなたはまた、それをあまりにもこのよう行うことができます：

：

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

EDIT

を私はあなたもこれを行うことができると思います

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