Question

我有一个下拉列表。当选择索引更改时，我想在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;                    }

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

Answer 1

首先你必须将AutoPostBack设置为false以在客户端（javascript）处理它，并且你不需要以编程方式添加onchange事件，你可以在{{1类似的东西

<asp:DrobDownList>

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

PasteTextInEditor

注意我使用jquery语法

Answer 2

使用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-添加＆＃34;启动＆＃34;用于挂钩下拉列表的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>

在javascript中处理dropdownlist选择的索引

2 个答案: