Question

这个过程很简单：

在文本框中键入文字
如果文本与下拉列表中的值匹配，则更新该值。
如果文本与下拉列表中的值不匹配，请使用ASP.NET onTextChanged事件进行回发。 （这就是问题所在。下面的代码目前阻止了所有实例中的回发）

HTML

<asp:DropDownList ID="d" runat="Server" AppendDataBoundItems="true"/>

<asp:TextBox ID="t" runat="Server" AutoPostBack="true" onchange="if(!test(this)) return false;"/>

JQUERY

$(function test() {
  var d = ('#<%= d.ClientID%>'),
      t = ('#<%= t.ClientID%>');

  $(d + ',' + t).on('change', function () {
    var val = this.value;
    $(d + ' option').each(function () {
      if (this.value == val) {
        $(d + ',' + t).val(val);
        return false;
      }
      return true;
    });
  });
});

此代码非常适合更新下拉列表值。问题是这段代码在所有情况下都会阻止回发。

我认为问题是onchange是从文本框中触发的，然后javascript onchange中的后续代码将无效。

Answer 1

尝试使用javascript:return test()代替if(!test(this)) return false;，就像这样

<asp:TextBox ID="t" runat="Server" AutoPostBack="true" 
 onchange="javascript:return test()"/>

和JavaScript

 function test() {
            var d = document.getElementById('d'), t = document.getElementById('t');
            var ddl = ('#d');
            var txt = ('#t');
            var val = t.value;
            var len = $(ddl+ ' option[value=' + val + ']').length;
            if (len > 0) {
                d.value = t.value = val;
                return false;
            } 
                return true;

        }

<强>更新

.aspx的

 <asp:DropDownList ID="d" runat="Server" AppendDataBoundItems="true" onchange="javascript:return test('ddl')"/>

        <asp:TextBox ID="t" runat="Server" AutoPostBack="true" onchange="javascript:return test('txt')" />

的JavaScript

function test(temp) {
            var d = document.getElementById('<%= d.ClientID%>'), t = document.getElementById('<%= t.ClientID%>');
            var ddl = ('#<%= d.ClientID%>');
            var txt = ('#<%= t.ClientID%>');
            var val = t.value;
            if (temp == "txt") {
                var len = $(ddl + ' option[value=' + val + ']').length;

                if (len > 0) {
                    d.value = t.value = val;
                    return false;
                } 
            }
            else {
                t.value = d.value;
                    return false;
                } 
                return true;
        }

Answer 2

您可以改用__doPostBack。

在下拉列表更改时回发：

$(function() {
    var d= $('#<%= d.ClientID%>');
    d.removeAttr('onchange');
    d.change(function(e) {
        //You can decide when to post back
        setTimeout('__doPostBack("<%= d.ClientID%>","")', 0);
    });
});

或在文本框更改时回发

$(function() {
    var t= $('#<%= t.ClientID%>');
    t.removeAttr('onchange');
    t.change(function(e) {
        setTimeout('__doPostBack("<%= t.ClientID%>","")', 0);
    });
});

如何在下拉列表中阻止文本框文本的回发？

2 个答案: