conditional dropdown

[ppbb123]

Hi All,

 

 

I have a HTML Block with drop down list of 2 values. I am looking for a Javascript to run on the

<SELECT onChange=...> event which:

 

When the selected value is 1, display entire <DIV id=testing1> section.<br />

When the selected value is 2, display entire <DIV id=testing2> section.<br />

<select id="Section" name="Section" onChange="Display(this);">

<option value='1' selected>1</option>

<option value='2'>2</option>

</select>

 

Thanks

[HongTaiLang]

Please try the following code:

 

<script language="JavaScript">



function Display(sec)

{

var dropdown = sec.options[sec.selectedIndex].value;

if (dropdown == '1')

{

document.getElementById('Section1').style.display = 'inline';

document.getElementById('Section2').style.display = 'none';

}

else if(dropdown == '2')

{

document.getElementById('Section2').style.display = 'inline';

document.getElementById('Section1').style.display = 'none';

}



return true;

}

</script>

[ppbb123]

Thank you so much. I read this article:http://howto.caspio.com/tech-tips/creating-collapsible-sections.html. I want to add hidden sections based on a dropdown box. How to do this?

[fangjie]

I think you only need to change a little.

1. Create a virtual dropdown field which contains "Section1", "Section2", "Section3","Select"

2. Add HTML blocks to surround sections and Create tables to encapsulate the section fields

3.Add the Displayer function to the footer

<script language="JavaScript">

function Display()
{
var sec = document.getElementById('cbParamVirtual1');
var dropdown = sec.options[sec.selectedIndex].value;
if (dropdown == 'Select')
{
document.getElementById('Section1').style.display = 'none';
document.getElementById('Section2').style.display = 'none';
document.getElementById('Section3').style.display = 'none';
}
if (dropdown == 'Section1')
{
document.getElementById('Section1').style.display = 'inline';
document.getElementById('Section2').style.display = 'none';
document.getElementById('Section3').style.display = 'none';
}
else if(dropdown == 'Section2')
{
document.getElementById('Section2').style.display = 'inline';
document.getElementById('Section1').style.display = 'none';
document.getElementById('Section3').style.display = 'none';
}
else if(dropdown == 'Section3')
{
document.getElementById('Section3').style.display = 'inline';
document.getElementById('Section1').style.display = 'none';
document.getElementById('Section2').style.display = 'none';
}
}

document.getElementById('cbParamVirtual1').onchange = Display;
</script>

[luizcruz]

Hi,

 

I'm trying to adapt the script provided by "Fangjie" to suit our needs but unfortunately it is not working yet!

 

In our case we have dropdowns instead virtual fields!

 

I'm trying the following:

 

<script type="text/javascript">

    function Display()
    {
    var sec = document.getElementsByName("InsertRecordRenova_Origem");
    var dropdown = sec.options[sec.selectedIndex].value;
    if (dropdown == 'Select')
    {
    document.getElementById('Section3').style.display = 'none';
    document.getElementById('Section4').style.display = 'none';
    }
    if (dropdown == 'Yes')
    {
    document.getElementById('Section3').style.display = 'inline';
    document.getElementById('Section4').style.display = 'none';
    }
    else if(dropdown == 'No')
    {
    document.getElementById('Section3').style.display = 'inline';
    document.getElementById('Section4').style.display = 'none';
    }
    
    }

    document.getElementsByName("InsertRecordRenova_Origem").onchange = Display;

</script>

 

Please, anyone have any idea what is missing?

 

Thanks!

 

Luiz

[Jan]

Hello Luiz,

 

It seems that both brunches have the same code:

document.getElementById('Section3').style.display = 'inline';
document.getElementById('Section4').style.display = 'none';

Probably, in one of cases the code should be like

document.getElementById('Section3').style.display = 'none';
document.getElementById('Section4').style.display = 'inline';

[luizcruz]

 

Hello Luiz,

 

It seems that both brunches have the same code:

document.getElementById('Section3').style.display = 'inline';
document.getElementById('Section4').style.display = 'none';

Probably, in one of cases the code should be like

document.getElementById('Section3').style.display = 'none';
document.getElementById('Section4').style.display = 'inline';

Hi Jan!

 

Thank you very much!

 

I had noticed this error, but even correcting this mistake the script still does not work!

 

Regards!

 

Luiz