根据 TextBox 中的 Text 在 ListBox 中选择 ListItem

Question

我正在尝试根据使用 jquery 在文本框中输入的文本来选择 ListBox 中的项目。如果在文本框中输入的文本长度大于 1，我想遍历 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”文本框中值的长度 而不是页面上有多少元素
• 每个选择器已更改为$('#lsMediaCodes > option').each( 这将选择所有选项元素，而不仅仅是列表本身

演示 - http://jsfiddle.net/rMW2b/1/

Answer 2

试试这样的：

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"); 
} 

编辑

我认为你甚至可以这样做：

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

Answer 3

您需要做很多事情才能完成这项工作。首先，您需要为任何 ASP.NET 控件使用如下选择器：

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

当一个 asp.net 控件被渲染时，它的 ID 与你给 asp.net 控件的 ID 非常不同。

接下来，您需要查看 ListBox 生成哪些 html 元素来保存每个列表项并选择这些元素，而不是您的 ListBox。

当您在项目中创建 ASP.NET 控件时，它不会呈现为 ASP.NET，而是呈现为 HTML。因此，您必须弄清楚每个控件呈现的内容，就好像您想使用 javascript/jQuery 使用它一样。