manejar el índice seleccionado de la lista desplegable en javascript

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>

Aquí está el código C #

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

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

    }

Aquí está el 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?

preguntado el 22 de mayo de 12 a las 15:05

¿Qué pasa si simplemente alert ¿el valor? -

the alert is not getting called. i think its not going into script -

2 Respuestas

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> algo como eso

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

y PasteTextInEditor method will become

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

nota que estoy usando jQuery sintaxis

contestado el 22 de mayo de 12 a las 15:05

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

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

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

I created a sample code for what you want to do, you can download it aquí let me know if it doesn't help you - emir ismail

Usar jQuery you can make the following:

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

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

contestado el 22 de mayo de 12 a las 15:05

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

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

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

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.