drop down question

Discussion in 'ASP General' started by Scott, Nov 13, 2007.

  1. Scott

    Scott Guest

    On my page I have 3 drop downs that are populated with static data. When my user makes a selection in either drop down I want to show my HTML table associated with that drop down selection, also the data in my tables are all static.

    For example.

    if the user selects CAR - New in dropdown 1 I want to show a list of my new cars
    if the user selects TRUCK in dropdown 2, I want to hide my CARS and show my TRUCK list
    if the user selects BOATS - Fiberglass in dropdown 3, I want to hide (if shown) CARS, and TRUCKS and show my boat list.

    For now all of the data is static (don't ask) so I need to do all of this on the client. Is there a way to do this either using JavaScript, Div tags, CSS, etc.


    any help is apprecaited.
     
    Scott, Nov 13, 2007
    #1
    1. Advertising

  2. "Scott" <> wrote in message
    news:%...
    >On my page I have 3 drop downs that are populated with static data. When my
    >user makes a selection in either drop down I want to show my HTML table
    >associated with that drop down selection, also the data in my tables are

    all static.
    >
    >For example.
    >
    >if the user selects CAR - New in dropdown 1 I want to show a list of my new

    cars
    >if the user selects TRUCK in dropdown 2, I want to hide my CARS and show my
    >TRUCK list
    >if the user selects BOATS - Fiberglass in dropdown 3, I want to hide (if

    shown) >CARS, and TRUCKS and show my boat list.
    >
    >For now all of the data is static (don't ask) so I need to do all of this

    on the >client. Is there a way to do this either using JavaScript, Div tags,
    CSS, etc.
    >


    Yes.

    Although I'm a bit confused by the UI design, if each choice in each
    dropdown is mutually exclusive with all the other choices why have multiple
    dropdowns?

    Give each table of data an ID attribute; give each table a
    Class="displayable" attribute. Give each option in the Select(s) a value
    which is the ID of the respective table.

    In a <style type="text/css"> element in the page head place this this
    style:-

    table.displayable {display:none}

    Now on the select element(s) add the attribute
    onchange="changeDisplay.call(this)"

    in Javascript

    var m_currentDisplayTable = null
    function changeDisplay()
    {
    if (m_currentDisplayTable)
    document.getElementById(m_currentDisplayTable).style.display =
    "none"

    m_currentDisplayTable = this.value

    document.getElementById(m_currentDisplayTable).style.display = "block"
    }

    BTW, for future reference for purely clientside questions the
    scripting.jscript group is a far more appropriate group.

    --
    Anthony Jones - MVP ASP/ASP.NET
     
    Anthony Jones, Nov 13, 2007
    #2
    1. Advertising

  3. Scott

    Scott Guest

    thanks, its an odd design yeah I know, but its what the business wanted
    "Anthony Jones" <> wrote in message
    news:...
    >
    > "Scott" <> wrote in message
    > news:%...
    >>On my page I have 3 drop downs that are populated with static data. When
    >>my
    >>user makes a selection in either drop down I want to show my HTML table
    >>associated with that drop down selection, also the data in my tables are

    > all static.
    >>
    >>For example.
    >>
    >>if the user selects CAR - New in dropdown 1 I want to show a list of my
    >>new

    > cars
    >>if the user selects TRUCK in dropdown 2, I want to hide my CARS and show
    >>my
    >>TRUCK list
    >>if the user selects BOATS - Fiberglass in dropdown 3, I want to hide (if

    > shown) >CARS, and TRUCKS and show my boat list.
    >>
    >>For now all of the data is static (don't ask) so I need to do all of this

    > on the >client. Is there a way to do this either using JavaScript, Div
    > tags,
    > CSS, etc.
    >>

    >
    > Yes.
    >
    > Although I'm a bit confused by the UI design, if each choice in each
    > dropdown is mutually exclusive with all the other choices why have
    > multiple
    > dropdowns?
    >
    > Give each table of data an ID attribute; give each table a
    > Class="displayable" attribute. Give each option in the Select(s) a value
    > which is the ID of the respective table.
    >
    > In a <style type="text/css"> element in the page head place this this
    > style:-
    >
    > table.displayable {display:none}
    >
    > Now on the select element(s) add the attribute
    > onchange="changeDisplay.call(this)"
    >
    > in Javascript
    >
    > var m_currentDisplayTable = null
    > function changeDisplay()
    > {
    > if (m_currentDisplayTable)
    > document.getElementById(m_currentDisplayTable).style.display =
    > "none"
    >
    > m_currentDisplayTable = this.value
    >
    > document.getElementById(m_currentDisplayTable).style.display = "block"
    > }
    >
    > BTW, for future reference for purely clientside questions the
    > scripting.jscript group is a far more appropriate group.
    >
    > --
    > Anthony Jones - MVP ASP/ASP.NET
    >
    >
    >
     
    Scott, Nov 13, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    792
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,040
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    507
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    288
  5. Replies:
    3
    Views:
    304
Loading...

Share This Page