DropDownList visible javascript

Question

0.00/5 (No votes)

See more:

Hey guys I have a small problem, I want to display a dropdownlist based on another dropdownLists selectedIndex using Javascript without causing a postback.

JavaScript

function OnLoad() {
      DisplayCarrier(document.getElementById('<%= cboFileType.ClientID %>').selectedValue);
  }


  function DisplayCarrier(value) {
      if (value == 5) {
          document.getElementById('<%= cboCarrier.ClientID %>').visible = true;
       }
   }

My Html

ASP.NET

<asp:dropdownlist id="cboFileType" runat="server" CssClass="inputControl" OnSelectedIndexChanged="DisplayCarrier(this.value);" ></asp:dropdownlist>

Any help is very much apreciated, thanks guys

Posted 14-Aug-12 22:56pm

frostcox

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Linto Leo Tom · Answer 1 · 2012-08-14T23:23:00

Solution 1

Hi,

First of all register your dropdown which is to be chaged based on the selection of first dropdown in the pageload as
Page.RegisterHiddenField("hdnDropDown", DropDownID.CleintID)

You can add the client side event for the dropdownselectedindexchage for the first dropdown on your code behind as follows
DropDownnID.Attributes.Add("onchange", "javascript:DropDownChange(this)")

Inside the javascript function based on your requirements chage the value of the second dropdown

funtion DropDownChange(value) {
//your conditions
document.getElementById(document.getElementById("hdnDropDown").value).value = The value of the item to be selected in the second dropdown
}

Happy Coding :)

Posted 14-Aug-12 23:23pm

Linto Leo Tom

Comments

frostcox 15-Aug-12 6:33am

Hey thanks so much for your reply, only one question, I done all you suggested but when I try access the element in the javascript function like : document.getElementById('<%= cboCarrier.ClientID %>').visible = true; the javascript throws an error saying Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object, which would suggest the the element wasn't picked up on page load?

Linto Leo Tom 15-Aug-12 6:37am

Are you using any ContentPlaceHolder?

Linto Leo Tom 15-Aug-12 6:39am

instead of document.getElementById('<%= cboCarrier.ClientID %>'), try document.getElementById(document.getElementById("hdnDropDown").value)where hdnDropDown is the hidden field whcih we are registering in the page load towards the dropdown control
Page.RegisterHiddenField("hdnDropDown", DropDownID.CleintID)

Linto Leo Tom 15-Aug-12 6:41am

use this to make it hidden document.getElementById(document.getElementById("hdnDropDown").value).style.display = "none"

use this to make it visible
document.getElementById(document.getElementById("hdnDropDown").value).style.display = "block"

frostcox 15-Aug-12 14:20pm

Hey no matter what I do it throws an error when the selected index changes on the dropdown.

frostcox 16-Aug-12 8:43am

Ok turns out I had to do this if (value == 5) {
$get('<%= cboCarrier.ClientID %>').style.display = "block";
}

Cheers

Bryian Tan · Answer 2 · 2012-08-15T04:37:00

Try this out.

.aspx page

XML

<script>
        function DisplayCarrier(value) {

            if (value == 5) {
                document.getElementById('<%= cboCarrier.ClientID %>').style.visibility = 'visible';
            }
            else {
                document.getElementById('<%= cboCarrier.ClientID %>').style.visibility = 'hidden';
            }
        }
    </script>

    <style>
        .hidden { visibility:hidden; }
    </style>

    <asp:dropdownlist id="cboFileType" runat="server" CssClass="inputControl">
        <asp:ListItem Value="1">Item 1</asp:ListItem>
        <asp:ListItem Value="2">Item 2</asp:ListItem>
        <asp:ListItem Value="3">Item 3</asp:ListItem>
        <asp:ListItem Value="4">Item 4</asp:ListItem>
        <asp:ListItem Value="5">Item 5</asp:ListItem>
        <asp:ListItem Value="6">Item 6</asp:ListItem>
        <asp:ListItem Value="7">Item 7</asp:ListItem>
    </asp:dropdownlist>


    <asp:dropdownlist id="cboCarrier" runat="server" CssClass="hidden">
        <asp:ListItem Value="1">Test 1</asp:ListItem>
        <asp:ListItem Value="2">Test 2</asp:ListItem>
        <asp:ListItem Value="3">Test 3</asp:ListItem>
        <asp:ListItem Value="4">Test 4</asp:ListItem>
        <asp:ListItem Value="5">Test 5</asp:ListItem>
        <asp:ListItem Value="6">Test 6</asp:ListItem>
        <asp:ListItem Value="7">Test 7</asp:ListItem>
    </asp:dropdownlist>

aspx.vb page

VB

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
       cboFileType.Attributes.Add("onChange", "DisplayCarrier(this.value);")
   End Sub