Select control question in Javascript

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Carl Wu

    Select control question in Javascript

    Hi all,

    I am newcomer in HTML, Javascript,

    I want to create two select controls S1, S2.

    There are 3 options: ALL, A, B in S1;

    When select A in S1, It let you select A1, A2 in S2,

    Where select B in S1, It let you select B1, B2 in S2;

    When select ALL in S1, It let you select A1, A2, B1, B2 in S2

    The default selection in S1 is ALL,

    Can somebody give me some suggestion?

    Thanks advance

    Carl



  • Thomas 'PointedEars' Lahn

    #2
    Re: Select control question in Javascript

    Carl Wu wrote:
    [color=blue]
    > I want to create two select controls S1, S2.[/color]

    <select name="S1">
    </select>

    <select name="S2">
    </select>
    [color=blue]
    > There are 3 options: ALL, A, B in S1;[/color]

    <select name="S1">
    <option>ALL</option>
    <option>A</option>
    <option>B</option>
    </select>
    [color=blue]
    > When select A in S1, It let you select A1, A2 in S2,
    >
    > Where select B in S1, It let you select B1, B2 in S2;
    >
    > When select ALL in S1, It let you select A1, A2, B1, B2 in S2[/color]

    <script type="text/javascript" language="JavaS cript">
    <!--
    function enableItems(o)
    {
    if (!o || !o.form || !o.form.element s)
    return false;

    var
    o2 = o.form.elements['S2'],
    a1 = o2.options[0],
    a2 = o2.options[1],
    b1 = o2.options[2],
    b2 = o2.options[3];

    if (o2 && a1 && typeof a1.disabled != "undefined" )
    {
    switch (o.selectedInde x)
    {
    case 0: // ALL
    a1.disabled = false;
    if (a2)
    a2.disabled = false;
    if (b1)
    b1.disabled = false;
    if (b2)
    b2.disabled = false;
    break;

    case 1: // A
    a1.disabled = false;
    if (a2)
    a2.disabled = false;
    break;

    case 2: // B
    if (b1)
    b1.disabled = false;
    if (b2)
    b2.disabled = false;
    }
    }
    }
    //-->
    </script>
    <form action="...">
    <select name="S1" onchange="enabl eItems(this)">
    <option>ALL</option>
    <option>A</option>
    <option>B</option>
    </select>

    <select name="S2">
    <option>A1</option>
    <option>A2</option>
    <option>B1</option>
    <option>B2</option>
    </select>
    </form>

    Untested.
    [color=blue]
    > The default selection in S1 is ALL,[/color]

    It is the default because it is the first item.
    [color=blue]
    > Can somebody give me some suggestion?[/color]

    See above. And before you post to a newsgroup the next time, you should get
    a minimum clue of what you are doing (by reading documentations, FAQS aso.)
    This is not a support forum but a discussion group.


    PointedEars

    Comment

    Working...