ページ上の1つのコントロール
標準のASP.NETTextBoxおよびDropDownListコントロールをJavaScriptと組み合わせて使用するCodeProjectの編集可能なDropDownlistのこの簡単な例に従うことができます。
ただし、TextBoxとDropDownListのClientID値を取得するための参照を追加するまで、コードは機能しませんでした。
<script language="javascript" type="text/javascript">
function DisplayText()
{
var textboxId = '<% = txtDisplay.ClientID %>';
var comboBoxId = '<% = ddSelect.ClientID %>';
document.getElementById(textboxId).value = document.getElementById(comboBoxId).value;
document.getElementById(textboxId).focus();
}
</script>
<asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox>
<asp:DropDownList ID="ddSelect" style="width:140px" runat="server">
<asp:ListItem Value="test1" >test1</asp:ListItem>
<asp:ListItem Value="test2">test2</asp:ListItem>
</asp:DropDownList>
最後に、元の例と同じようにコードビハインドで、ページの読み込みに以下を追加しました。
protected void Page_Load(object sender, EventArgs e)
{
ddSelect.Attributes.Add("onChange", "DisplayText();");
}
ページ上の複数のコントロール
上記のすべてのコードを独自のASCXユーザーコントロールに配置して、プロジェクト全体で再利用できるようにしました。ただし、上記のコードは、特定のページに編集可能なDropDownListが1つだけ必要な場合にのみ機能します。
1つのページで複数のカスタムDropDownListコントロールをサポートする必要がある場合は、競合を避けるためにJavaScript関数名を一意に設定する必要があります。ClientIDをもう一度使用してこれを行います。
ASCXファイル内:
function DisplayText_<% = ClientID %>(){...}
背後のコードで:
/// ...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..
これは、サードパーティのコントロールの使用を回避する1つの方法です。