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+" )");

    }

这是手印

       function PasteTextInEditor(text) {

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

你能让我知道我犯的错误吗?

Answer 1

首先,您必须设置 AutoPostBack 假以在客户端( javascript) 处理它, 而不需要在程序上添加 < code> change 事件, 您可以在 < code\\ lt; asp: DrobDownList> 中写入类似的东西



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


和  PasteTextEditor  方法将变成

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


我使用 < a href=> "http://www.jquery.com" rel="nofollow">jquery  语法

Answer 2


使用 < a href=> "http://www.jquery.com" rel= "nofollow" >jQuery  您可以做以下工作:

关闭 AutoPostBack , 并且不处理关于已选择的 Index Changed 事件的 < code> :

<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 - 添加一个“ 启动” 脚本, 以勾勾下下调列表的 < code> changed 事件, 读读 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>

友情链接