event handler for ONE option in my form-select 1

sonicsnail · Nov 24, 2001

Hi have <select...> and want to trigger a javascript when ONE (and only one!) of the <option>'s are selected...

I know you can use <select onChange="function()... but that will fire the function regardless of which option was selected...

hows it done gurus?

thanks in advance,

Pete.

toolkit · Nov 24, 2001

Why don't you want to use the select's onChange event handler? Could you not do something like:

Code:

var REQUIRED_OPTION_INDEX = 3;

function handleSelect( select ) {
    if( select.selectedIndex == REQUIRED_OPTION_INDEX ) {
        // do something
    } else {
        // do nothing
    }
}

Cheers, Neil

sonicsnail · Nov 24, 2001

here's the full story..

I want to have a few extra form fields appear IF a certain option is selected...

IE. there are four options - "one" "two" "three" and "four"...

If the user chooses "four", then a (style-sheet hidden) <span> appears, with some more things for them to fill out.

I have the appear/disappear functions already for the <span> - but I just need to call it from ONE of the <option>'s.

To be honest I'm a little confused over your script (spot the newbie!)..

toolkit · Nov 24, 2001

Right, have a look at this code, tested quickly with IE:

Code:

<html>
<head>
<script>

// your hidden span
var span;

    function makeSpan() {
        span = document.createElement( 'span' );
        span.style.position = &quot;absolute&quot;;
        span.style.visibility = &quot;hidden&quot;;
        span.style.color = &quot;red&quot;;
        span.style.border = &quot;1px solid black&quot;;
        span.appendChild( document.createTextNode( &quot;Hello&quot; ) );
        document.body.appendChild( span );
    }

    function handleSelect( select ) {

        // find the option object that was selected
        var option = select.options[ select.selectedIndex ];

        if( option.text == &quot;four&quot; ) {
            span.style.pixelLeft = 100;
            span.style.pixelTop = 100;
            span.style.visibility = &quot;visible&quot;;
        } else {
            span.style.visibility = &quot;hidden&quot;;
        }
    }
</script>
</head>
<body onLoad=&quot;makeSpan()&quot;>
    <select onChange='handleSelect( this )'>    
       <option>one</one>
       <option>two</one>
       <option>three</one>
       <option>four</one>
    </select>
</body>
</html>

Using [tt]onChange='handleSelect( this )'[/tt] passes the select object to the [tt]handleSelect[/tt] function. The option that was selected can de determined, and your hidden span made visible as required. Hope this helps, cheers Neil

sonicsnail · Nov 24, 2001

Thank you! - you seem to have hit the spot...

one problem though (I think...)

I need to have form elements in the span.. (I assume with the way you've done it I can only put text in there?) can't I just declare the span in the main body of the page? - why did you choose to build the span on the fly?

toolkit · Nov 24, 2001

You can do the same thing with a fixed position span. Something like:

Code:

<span id=&quot;hideThis&quot;><input type=&quot;text&quot; name=&quot;fred&quot;></span>

<script>
   // when you want to hide the span:
   var span = document.getElementById( 'hideThis' );
   span.style.visibilty = &quot;hidden&quot;;
</script>

Cheers, Neil

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

event handler for ONE option in my form-select 1

sonicsnail

Technical User

toolkit

Programmer

sonicsnail

Technical User

toolkit

Programmer

sonicsnail

Technical User

toolkit

Programmer

Similar threads

Part and Inventory Search

Sponsor