如果文本框文本在下拉列表中，如何防止回發？

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