I need to show options based on change in dropdown box.

I need to show the radio button options based on my a selection has in a drop down box. Say that there are 5 options(radio buttons). Three should be shown when user selects option one in the dropdown box and it should hide two when user selects the option two. It should hide the radio buttons from option one when user selects the second option. vice-versa.

What my code does is it uses div tags to seperate the radio buttons into gropus of three and two using an id. I have written an on changefunction to catch the change in the selection in the dropdown box. The problem i am having is that the display shows three options when i select option 1 but there is a blank space for the remaining two options too. In the same way when i select option 2 the radio buttons are shown in the bottom with blank space on top.

function fnServiceType(){

var serType = document.forms["ChangeServiceRequestForm"].elements['cboServiceType'].value;
if(serType != null && serType == "B")
{


banButton.style.visibility='visible';
cktButton.style.visibility='hidden';

}

else
{
if(serType != null && serType == "C"){
cktButton.style.visibility='visible';
banButton.style.visibility='hidden';
}

cktButton, banButton are the DIV id's that have the radio button options.

Any help will be appreciated.

Thanks

Comments

  • Instead of visibility, use display and set it to none. That will remove it from the rendering entirely, instead of just making it invisible.
    ---
    Vote D.

  • : Instead of visibility, use display and set it to none. That will remove it from the rendering entirely, instead of just making it invisible.
    : ---
    : Vote D.
    :
    : Thanks!!!!It Works..

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories