handle dropdownlist selected index in javascript

Question

i have a drop downlist. When Selected Index changes I wanted to handle it in javascript. So, as starting step , I tried to print the value of list item text in a textbox through javascript. But could not accomplish it successfully. Here is the dropdownlist:

       <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>

Here is the C# code

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

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

    }

Here is the javascript

       function PasteTextInEditor(text) {

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

Can you please let me know the mistake I've been doing?

the alert is not getting called. i think its not going into script — Sayamima
– Sayamima, Commented May 22, 2012 at 14:29

Amir Ismail · Accepted Answer · 2012-05-22 14:34:13Z

1

first you have to set AutoPostBack to false to handle it in client side(javascript) and you don't need to add onchange event programatically, you can just write it in the <asp:DrobDownList> something like that

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

and the PasteTextInEditor method will become

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

note I am using jquery syntax

answered May 22, 2012 at 14:34

Amir Ismail

3,8713 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sayamima Over a year ago

The code lies in usercontrol. The error is coming from the parent page.

Amir Ismail Over a year ago

is this compilation error or runtime exception? I cannot get what causing this error without showing us the code, please provide more code to be able help you

Sayamima Over a year ago

i removed everything else and just kept the code but it still throws this error. I just have this entire code in usercontrol and i call this user control in another page

Amir Ismail Over a year ago

I created a sample code for what you want to do, you can download it here let me know if it doesn't help you

edteke · Accepted Answer · 2012-05-22 14:50:28Z

0

Using jQuery you can make the following:

1- turn off AutoPostBack and don't handle the OnSelectedIndexChanged event:

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

2- add a reference to jQuery

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

3- add a "startup" script to hook the onchanged event for the dropdown list, read the javascripts comments for more details.

<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>

answered May 22, 2012 at 14:50

edteke

5726 silver badges22 bronze badges

3 Comments

Sayamima Over a year ago

Hey. it doesn't work. I dont know jquery but how will script fire because i did not specify anything to run this script

edteke Over a year ago

It's fired when the document is ready, and the script binds a function to the onchanged event of the ddl. Then the function we passed by parameter to the changed method is executed when the onchange event is fired. Please download the working sample I wrote for you here: bit.ly/LyHbQ3

Sayamima Over a year ago

Thank you.. I'll look into it and try figuring out the problem

Collectives™ on Stack Overflow

handle dropdownlist selected index in javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related