1

我有一个下拉列表。When Selected Index changes I wanted to handle it in javascript. 因此，作为开始步骤，我尝试通过 javascript 在文本框中打印列表项文本的值。但未能成功完成。这是下拉列表：

       <asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
                AppendDataBoundItems="True" TabIndex="3" AutoPostBack="True" 
                OnSelectedIndexChanged = "PlaceHoldersDropDownList_SelectedIndexChanged"  >
            <asp:ListItem Value="">Select</asp:ListItem>
            <asp:ListItem Value="ContactName">[Contact Name]</asp:ListItem>
            <asp:ListItem Value="ProductName">[Product Name]</asp:ListItem>
            <asp:ListItem Value="ProductShortName">[Product Short Name]</asp:ListItem>
            <asp:ListItem Value="CurrentTime">[Current Time]</asp:ListItem>
            <asp:ListItem Value="EventStartTime">[Event Start Time]</asp:ListItem>
            <asp:ListItem Value="EventStopTime">[Event Stop Time]</asp:ListItem>
        </asp:DropDownList>
        <asp:TextBox ID="tb" runat="server"></asp:TextBox>

这是C#代码

            protected void PlaceHoldersDropDownList_SelectedIndexChanged(object sender, 
                                                            EventArgs e)
    {
        var text = PlaceHoldersDropDownList.SelectedItem.Text;

        string x = text;
        PlaceHoldersDropDownList.Attributes.Add("onchange", "javscript:PasteTextInEditor
                                                                        ('"+text+"')");

    }

这是javascript

       function PasteTextInEditor(text) {

        var x = document.getElementById("<%= tb.ClientID %>");
        x.value = text;                    }

你能告诉我我一直在做的错误吗？

4

2 回答 2

1

首先，您必须设置AutoPostBack为 false 才能在客户端（javascript）中处理它，并且您不需要以onchange编程方式添加事件，您可以将它写成<asp:DrobDownList>类似的东西

<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
     AppendDataBoundItems="True" TabIndex="3" AutoPostBack="false"
     onchange="PasteTextInEditor()">

该PasteTextInEditor方法将变为

function PasteTextInEditor() {
    var text = $("#<%= PlaceHoldersDropDownList.ClientID %> option:selected").text();
    $("#<%= tb.ClientID %>").val(text);
}

注意我使用的是jquery语法

于 2012-05-22T14:34:13.767 回答
0

使用jQuery，您可以进行以下操作：

1-关闭AutoPostBack并且不处理OnSelectedIndexChanged事件：

<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server" AppendDataBoundItems="True" TabIndex="3" >

2-添加对jQuery的引用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

3-添加一个“启动”脚本来挂钩onchanged下拉列表的事件，阅读 javascripts 评论以获取更多详细信息。

<script type="text/javascript">
    $(function () {
        var ddl = $("#<%= PlaceHoldersDropDownList.ClientID %>");
        var txt = $("#<%= tb.ClientID %>");

        // hook the change event for the drop down list
        $(ddl).change(function (e) {
            var selectedValue = $(ddl).val();

            // set the selectedValue into the textBox
            $(txt).val(selectedValue);
        });
    });
</script>
于 2012-05-22T14:50:28.427 回答