call javascript function on asp dropdown list change

Question

        <script type="text/javascript">
            function ddl(id) {
      //          var id = document.getElementById('<%=DDLquestionType.ClientID%>').value;
                if (id == "Open") {
                    AmericanAnswer.style.display = 'none';
                    document.getElementById('Answer1_Btn').style.visibility = false;
                    
                }
                alert(id);
            }
        </script>

                <asp:DropDownList ID="DDLquestionType" CssClass="ddlQuestionType box"  runat="server" AutoPostBack="True" onchange="ddl(this)" >
                    <asp:ListItem Text="American" Value="American"></asp:ListItem>
                    <asp:ListItem Text="Open" Value="Open"></asp:ListItem>
                    <asp:ListItem Text="Yes/No" Value="YesNo"></asp:ListItem>
                    <asp:ListItem Text="Numerical" Value="Numerical"></asp:ListItem>
                </asp:DropDownList>

I have this java script function:

Which I try to call on drop down list selection change

It doesn't work. I also tried onchange="javascript:ddl()" and function without parameters, ononchange="javascript:ddl(this);", ononchange="javascript:ddl(this.value);", and many others. I'm new to java script, any links with explanations also will be highly appreciated

Please don't post screenshots of your code. That's like going to a car repair shop with a photo of your car. Post your code. — Tomalak
– Tomalak, Commented Aug 26, 2016 at 15:48
When you edit your question, you should see a yellow box with tips how to use the editor. Among other things it describes how to post code. — Tomalak
– Tomalak, Commented Aug 26, 2016 at 16:00
The {} control of the editor formats the selected text as code, indenting it with 4 spaces on each line (you can indent it manually if you prefer). — Martin Parenteau
– Martin Parenteau, Commented Aug 26, 2016 at 16:45

Shekhar Patel · Accepted Answer · 2016-08-26 17:04:58Z

3

you dosent need to pass this parameter or id, you just call the function and onchange() event call the function. in javascript use id of your dropdown list to get the value of dropdown list.

<script type="text/javascript">
function processchange(value)
{
  if(ddl.value=="American")
    // your code
}
</script>

<dropdownlist id="ddl" onchange="processchange()" >
  //enter your dropdown items
  
  </dropdownlist>

answered Aug 26, 2016 at 17:04

Shekhar Patel

67111 silver badges20 bronze badges

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

Comments

Martin Parenteau · Accepted Answer · 2016-08-26 16:11:55Z

1

When you pass this as a parameter, you pass the DropDownList itself to the Javascript function. Therefore, you don't need to use the id to retrieve the control. You can get the value of the selected item with the value property, and you can access the items with the options array.

<asp:DropDownList runat="server" onchange="processChange(this);" ... >

function processChange(ddl) {
    if (ddl.value == 'Open') {
        var americanItem = ddl.options[0];
        ...
    }
}

Since you have set AutoPostBack="true" for the DropDownList, some of the changes that you make in your Javascript function may be lost after the postback. You can try with AutoPostBack="false" to see the difference.

edited Aug 26, 2016 at 16:11

answered Aug 26, 2016 at 15:58

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Collectives™ on Stack Overflow

call javascript function on asp dropdown list change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related