JQuery,具有函数的Select Case语句,并使其全部正常工作

时间:2014-02-11 08:06:56

标签: javascript jquery asp.net vb.net select

遇到了我在过去一两天内尝试过的问题,似乎无法弄明白。

标题不是正义的问题 - 它更复杂/更难解释。

所以我有一个自定义DropSearch的代码:

<% Select Case dtype%>
<% Case "postbasic"%>
<div class="SearchOverallbox" style="<%= sstyle %>">
<asp:TextBox ID="SearchBox" class="SearchBoxstyle InputClass" runat="server" onkeyup="RefreshUpdatePanel();" AutoCompleteType="Enabled"></asp:TextBox>
<asp:ListBox ID="SearchList" class="SearchListstyle DropDownClass" runat="server" AutoPostBack="false" onclick="listclick();" Style="display: none;"></asp:ListBox>
<script type="text/javascript">
    function RefreshUpdatePanel() {
        if ($('#<%=SearchBox.ClientID%>').val() !== "") {
            $('#<%=SearchList.ClientID%>').show();
            $.ajax({
                type: "POST",
                url: "../Controls/ServerCalls.aspx/SearchDrop",
                data: JSON.stringify({
                    SearchVal: $("#<%=SearchBox.ClientID%>").val(),
                    Type: "<%=query %>"
                }),
                contentType: "application/json; charset=utf-8",
                async: false,
                cache: false,
                dataType: "json",
                success: function (msg) {

                    var htmlSelect = document.getElementById('<%=SearchList.ClientID%>');
                    if (msg.d.length > 0) {
                        htmlSelect.innerHTML = msg.d;
                    }
                },
                error: function () {
                    alert("An error has occurred during processing your request.");
                }
            })
            }
            else {
                $('#<%=SearchList.ClientID%>').hide();
            $('#<%=SearchList.ClientID%>').empty();

        }
    }

    function listclick() {
        $("#<%=SearchBox.ClientID%>").val($("#<%=SearchList.ClientID%> :selected").text());
        document.getElementById('<%=SearchList.ClientID%>').innerHTML = "";
        $('#<%=SearchList.ClientID%>').hide();
    }
</script>

现在我有多个文本框,其'postbasic'为前面提到的'dtype'。

因此,我的每个控件都在运行时完美地填充了此代码,并在Chrome / IE中进行调试显示每个控件都附加了此脚本,每个定义都应该如此。

但是,当我进入页面并尝试对其进行测试时,它会跳到最后一个控件并附加此脚本,然后运行它 - 即使我在最顶层的文本框控件中写入。

例如。如果我在顶部填写说明,它会检查最底部的供应商编号是否包含任何文本,如果有任何内容,则会显示附加到供应商编号控件的DropList,而不是描述文本框中。 / p>

任何帮助将不胜感激。如果需要,可以进一步澄清。

亲切的问候,

迪。

1 个答案:

答案 0 :(得分:0)

所以我想出了一个对我有用的解决方法。这有点凌乱,但是有了更多的工作,我会得到它的好看和整洁,但功能是我所追求的,我已经得到它。此外,它让我摆脱每个文本框的每个单独的案例,所以我已经清除了大约400行超额代码。

代码:

  <script>
    $('.SearchOverallbox').on('keyup', function(){
        var CurrentTextBox = $('*:focus').attr('id');
        var CurrentListBox = CurrentTextBox.replace("SearchBox", "SearchList")

        var splitFirstUS = CurrentTextBox.indexOf("_", 0)
        var splitLastUS = CurrentTextBox.lastIndexOf("_")
        var queryString = CurrentTextBox.substring(splitFirstUS+1, splitLastUS)

        if(CurrentTextBox.length > 1){
            $("#" + CurrentListBox).show();
            $.ajax({
                type: "POST",
                url: "../Controls/ServerCalls.aspx/SearchDrop",
                data: JSON.stringify({
                    SearchVal: $("#" + CurrentTextBox).val(),
                    Type: queryString
            }),
            contentType: "application/json; charset=utf-8",
            async: false,
            cache: false,
            dataType: "json",
            success: function (msg) {

                var htmlSelect = document.getElementById(CurrentListBox);
                if (msg.d.length > 0) {
                    htmlSelect.innerHTML = msg.d;
                }
            },
            error: function () {
                alert("An error has occurred during processing your request.");
            }
        })
    }
    else {
        $("#" + CurrentListBox).hide();
        $("#" + CurrentListBox).empty();

    }
});

希望这能帮助像我一样在同一条船上的任何人(虽然我对此表示怀疑!)。

迪。