Using Javascript to hide and show drop down menu and text field

Question

In the following drop-down menu, when a user selects operation No, I want the next drop-down menu displayed

<select id="OperationType" onChange="check(this);">
 <option value="OpNo">Operation No</option>
 <option value="OpEmp">Employee No</option>
</select>

<select id=OperationNos>
 <option value="1001">1001</option>
 <option value="1002">1002</option>
</select>

If the user selects employee no, I want the last drop-down menu to be hidden and the following text field shown up:

<input type='text'>

What I did is I put the following script but it doesn't hide neither of the two elements:

function check(elem) {
    document.getElementById('OperationType').disabled = !elem.selectedIndex;
}

It only disabled it. I want it to be invisible. Thanks

sman591 · Accepted Answer · 2013-04-07 08:42:27Z

8

~~Add a style="display: none" to your OperationNos select:~~

You do not need to pass this to check().

And modify your function to toggle this css property if "OpNo" is selected:

function check() {
    var dropdown = document.getElementById("OperationType");
    var current_value = dropdown.options[dropdown.selectedIndex].value;

    if (current_value == "OpNo") {
        document.getElementById("OperationNos").style.display = "block";
    }
    else {
        document.getElementById("OperationNos").style.display = "none";
    }
}

Example: http://jsfiddle.net/2pna2/

edited Apr 7, 2013 at 8:42

answered Apr 7, 2013 at 8:30

sman591

5606 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Sadh · Accepted Answer · 2013-04-07 09:14:39Z

Use this:-

function hideshow()
{
var s1= document.getElementById('OperationType');
var s2= document.getElementById('OperationNos');

if( s1.options[s1.selectedIndex].text=="Operation No")
{
s2.style.visibility = 'visible';
document.getElementById('t1').style.visibility = 'hidden';
}
if( s1.options[s1.selectedIndex].text=="Employee No")
{
s2.style.visibility = 'hidden';
document.getElementById('t1').style.visibility = 'visible';
}
}
function hide()

{

document.getElementById('t1').style.visibility = 'hidden';
}

Html code:-

<body onload="hide()">

<select id="OperationType" onChange="hideshow()">
 <option value="OpNo">Operation No</option>
 <option value="OpEmp">Employee No</option>
</select>

<select id="OperationNos">
 <option value="1001">1001</option>
 <option value="1002">1002</option>
</select>

<input type="text" id="t1" />
</body>

kidwon · Accepted Answer · 2013-04-07 08:29:10Z

1

Look at that:

var ot = document.getElementById('OperationType');
ot.disabled = !elem.selectedIndex;
ot.style.display = 'none'; // not rendered
//ot.style.visisbility = 'hidden'; // rendered but just invisble it's there

answered Apr 7, 2013 at 8:29

kidwon

4,5325 gold badges31 silver badges46 bronze badges

Collectives™ on Stack Overflow

Using Javascript to hide and show drop down menu and text field

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related