DropDownListの選択からTextBoxを作成するASP.NET/Javascript

Question

私はDDLとASP.NETのテキストボックスを持っています。私は、DDLから選択するオプションをテキストボックスに入力したいと思います。私はこれを即時にする必要があり、ポストバックを使わないようにする必要があるので、ここではJavaScriptが当然の選択と思われます。私は検索のかなりを行っているが、私が見つけたすべてのものは、標準的なHTML（選択入力）のためであると思われる、これらはASPオブジェクトを操作するためには表示されません。

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

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

私のDDLがでSQLから移入されましたコードビハインドページ。

誰かが私が使用すべき適切なコードを手助けできますか？ありがとう。

Answer 1

は、（単にgoogle.comでのCDNでホストされたjQueryのファイルへの参照を提供）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> 

Answer 2

ASP.Netコントロールは、ブラウザの標準HTML要素としてレンダリングされます。スクリプトでは、ASP.NetコントロールのClientIDプロパティを使用して、スクリプトへの参照を取得できます。

はあなたのaspxのスクリプトブロックでこれを入れて：

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

今、あなたは「DOMは、ASP.Netコントロールがレンダリングされたことを選択し、入力要素のためのオブジェクトとあなたがテクニックにあなたを使用することができますへの参照を持っていますすでにHTML要素で学んだことがあります。あなたのようなあなたのDropDownListコントロールにのonchange属性を追加する必要が

追加情報 ：その後、

<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でテストされています。あなたはJavaScriptに新しいしている場合

Answer 3

をあなたがJavaScriptの初心者であると指摘しましたが、あなたがアップデートパネルコントロールを使用することをお勧めします。更新パネルを使用すると、ページを更新せずにサーバーコードを実行できます。ドロップダウンリストとテキストボックスを同じupdatepanelまたは2つの別々の更新パネルに置き、ドロップダウンリストの選択に基づいて更新するテキストボックスのコードを記述します。自動ポストバックを行うようにドロップダウンリストを設定してください。次のように 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