從DropDownList選擇填充TextBox ASP.NET/JavaScript

我有一個DDL和ASP.NET文本框。我想用我從DDL中選擇的選項填充文本框。我需要這是瞬間的，而不是使用回傳，所以看起來JavaScript將是明顯的選擇。我已經做了相當多的搜索，但一切我發現似乎是標準的HTML（選擇和輸入），這些不會出現與ASP對象的工作：從DropDownList選擇填充TextBox ASP.NET/JavaScript

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" DataTextField="FullName" /> 

<asp:TextBox runat="server" id="txtSalesPerson" />

我的DDL從SQL填充在代碼隱藏頁面。

有人可以協助我使用適當的代碼嗎？謝謝。

來源

2011-02-07 James

如果你是新來的JavaScript，使用jQuery庫（僅提供在google.com到CDN託管的jQuery文件的引用），然後你可以使用下面的代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    $("#DDLSalesPerson").change(function() { 
     $("#txtSalesPerson").val($(this).val()); 
    }); 
</script>

來源

2011-02-07 15:27:38 Scott

ASP.Net控件呈現爲瀏覽器上的標準HTML元素。在腳本中，您可以通過使用ASP.Net控件的ClientID屬性來獲取對它們的引用。

在你的aspx把這個腳本塊：

var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>'); 
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

現在你必須引用到DOM對象的選擇和輸入元素的ASP.Net控件呈現，你可以使用這些技術你」已經學習了HTML元素。

其他信息 你需要一個onchange屬性添加到您的DropDownList控制，例如：

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />

，然後把這個腳本塊在你的aspx

<script type="text/javascript"> 

    function ddlChange() 
    { 
     var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>'); 
     var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>'); 

     textBox.value = ddl.options[ddl.selectedIndex].text; 
    } 

</script>

當你改變下拉列表中，您將看到文本框更新。在IE和Chrome中測試。

來源

2011-02-07 15:18:27 Matthew

既然你已經指出你是一個JavaScript初學者，我可以建議你使用一個updatepanel控件。 updatepanel允許您在不刷新頁面的情況下執行服務器代碼。只需將dropdownList和文本框放置在同一個更新面板或兩個單獨的更新面板中，並根據下拉列表選項編寫要更新的文本框的代碼。確保將下拉列表設置爲autopostback。 ASP的標記如下：

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
<asp:DropDownList ID="ddlList" runat="server" 
     AutoPostBack="True"> 
     <asp:ListItem>-select-</asp:ListItem> 
     <asp:ListItem>option 1</asp:ListItem> 
     <asp:ListItem>option 2</asp:ListItem> 
    </asp:DropDownList> 
<asp:TextBox ID="txtTextBox" runat="server" /> 

</ContentTemplate> 
</asp:UpdatePanel>

VB中的代碼隱藏如下：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
     If ddlList.Text <> "-select-" then 
      txtTextBox.Text = ddlList.text 
     End If 
    End Sub

來源

2011-02-07 18:18:52 boruchsiper

從DropDownList選擇填充TextBox ASP.NET/JavaScript

回答

相關問題