Drop down options to hide using javascript

Question

I have two drop down menus where I want the options in the second drop down menu to be hidden depending of which option is selected in the first drop down menu. I have found some examples in google for this but the problem is that because I am too deep in my coding, I do not want to risk creating new functions and using jquery and etc from scratch. So what I want to know if someone can implement into my code the way this can be achieved by creating one example of this which is below:

If optionDrop (Drop Down 1) value = "ABC", then numberDrop (Drop Down 2) options will shows "", "1", "2" and "3" but hides "4".

Below is javascript code which is relevant to this question (there is more to this code but don't need to show it for this question):

   function getDropDown() {
         var optionDrop = document.getElementsByName("optionDrop");
        var numberDrop = document.getElementsByName("numberDrop");

    if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
                    numberDrop[0].style.display = "block";
                    na.style.display = "none";

    }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){            
                    numberDrop[0].style.display = "none";
                    na.style.display = "block";
    }
}

Html code that shows drop down menus:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
    </tr>
<tr>
<td>Number of Answers:</td>
<td>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>

John Odom · Accepted Answer · 2015-05-07 21:25:37Z

6

Here's an attempt, firstly I'ld change the first dropdown's onclick="getDropDown()" to: onchange="getDropDown(this[this.selectedIndex].value)" and correspondingly:

function getDropDown(forValue) 
{
    var numberDrop = document.getElementsByName("numberDrop");

    if (forValue !== "trueorfalse" && forValue !== "yesorno")
    {
        numberDrop[0].style.display = "block";
        na.style.display = "none";
    }
    else 
    {            
        numberDrop[0].style.display = "none";
        na.style.display = "block";
    }
}

If there's no dynamic angle to the values in the first drop down (i.e. they won't be changing on run time,), the code assumes that if it is not trueorfalse or yesorno, it is abc or the others...

with the first change i.e. sending the value to the function, you improve your js by not having to get the element and then finding what was selected. if you do need the element, you could always just send "this" from the html element on change, and then get the value within your function.

if above seems to work or at least make sense, let it be known here. if there's more to it that I have missed, do comment so that I may elaborate further ;)

edited May 7, 2015 at 21:25

John Odom

1,2132 gold badges22 silver badges36 bronze badges

answered Dec 3, 2011 at 18:49

balach

973 bronze badges

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

2 Comments

Jake Feasel Over a year ago

Does setting the display="none" actually hide the option for you? I don't think that works in all browsers.

balach Over a year ago

@JakeFeasel, yep, that is true. I just meant to simplify the JS, notice I didn't change anything within the blocks. As to display none on option tags, I think it's webkit that totally ignores it, so I'ld advise removing and re-adding options depending on the first selection.

andrewsi · Accepted Answer · 2012-10-04 13:25:27Z

2

Pass the element id as the parameter to hid() function.....

function hid(element)
{
    var drop=document.getElementById(element);
    drop.options[0].style.visibility="hidden";
}

This would hide the option in 1st place

edited Oct 4, 2012 at 13:25

andrewsi

10.7k132 gold badges37 silver badges52 bronze badges

answered Oct 4, 2012 at 10:21

Mathana Prithiviraj

6910 bronze badges

Comments

George · Accepted Answer · 2013-09-06 07:50:27Z

Here's a clean example that you can adapt from:

<script type="text/javascript">
function getDropDown(sel){
  hideAll();
  document.getElementById(sel.options[sel.selectedIndex].value).style.display 
  = 'block';
}

function hideAll(){
  document.getElementById("vancouver").style.display = 'none';
  document.getElementById("singapore").style.display = 'none';
  document.getElementById("newyork").style.display = 'none';
}
</script>

<table id="middleDetails" border="1">
    <tr> 
        <td>
            <select name="optionDrop" onChange="getDropDown(this)">
                <option value="">Please Select</option>
                <option value="vancouver">Vancouver</option>
                <option value="singapore">Singapore</option>
                <option value="newyork">New York</option>
            </select>
        </td>
    </tr>
</table>

<div id="vancouver" style="display: none;">
  Vancouver
</div>

<div id="singapore" style="display: none;">
  Singapore
</div>

<div id="newyork" style="display: none;">
  New York
</div>

Pang · Accepted Answer · 2017-07-05 07:17:44Z

1

Try to disable that option with hidden attribute.

if (optionDrop[0].options[optionDrop[0].selectedIndex].text != "Abc") {
    for (var ctr = 0; ctr < optionDrop[0].length; ctr++)
    {
        if (optionDrop[0].options[ctr].text == "Abc")
        {
            optionDrop[0].options[ctr].hidden = "true";
        }
    }
}
else {
    optionDrop[0].options[optionDrop[0].selectedIndex].hidden = "false";
}

edited Jul 5, 2017 at 7:17

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jul 5, 2017 at 6:58

AnshuM

111 bronze badge

Comments

Phrogz · Accepted Answer · 2011-12-03 16:20:31Z

0

These (super old) examples of mine might help you:

answered Dec 3, 2011 at 16:20

Phrogz

304k115 gold badges669 silver badges758 bronze badges

Comments

Jake Feasel · Accepted Answer · 2011-12-03 18:31:06Z

Well, I don't really understand the general problem you're trying to solve, since you seem to be asking for a very specific set of logic without making it generic, but here is some code that should do what you describe (if not much else):

   function getDropDown() {
         var optionDrop = document.getElementsByName("optionDrop");
        var numberDrop = document.getElementsByName("numberDrop");

    if (optionDrop[optionDrop.selectedIndex].value == "abc" || optionDrop[optionDrop.selectedIndex].value == "abcd" || optionDrop[optionDrop.selectedIndex].value == "abcde"){
                    numberDrop[4].style.display = "block"; //maybe should be display="none"; ?
                    na.style.display = "none"; // what is this "na" reference?

    }else if (optionDrop[optionDrop.selectedIndex].value == "trueorfalse" || optionDrop[optionDrop.selectedIndex].value == "yesorno"){            
                    numberDrop[4].style.display = "none"; //maybe should be display="block";?
                    na.style.display = "block"; // what is this "na" reference?
}
}

Take two:

   function getDropDown() {
         var optionDrop = document.getElementById("optionDropId");
        var numberDrop = document.getElementById("numberDropId");

       if (optionDrop.options[optionDrop.selectedIndex].value == "abc" || optionDrop.options[optionDrop.selectedIndex].value == "abcd" || optionDrop.options[optionDrop.selectedIndex].value == "abcde"){

           numberDrop.options[4].disabled = true; //maybe should be display="none"; ?
                    //na.style.display = "none"; // what is this "na" reference?

    }else if (optionDrop.options[optionDrop.selectedIndex].value == "trueorfalse" || optionDrop.options[optionDrop.selectedIndex].value == "yesorno"){            
                    numberDrop.options[4].disabled = false; //maybe should be display="block";?
                    na.style.display = "block"; // what is this "na" reference?
}
}

Hasiya · Accepted Answer · 2018-06-19 07:51:13Z

This will work for you.check below code.

<script type="text/javascript">
    function EnableChargeType()
    {
        var ddlacctype = document.getElementById('<%= ddlAccountType.ClientID%>');
        var ddlchargeType = document.getElementById('<%= ddlChargeType.ClientID %>');
        var selectedItem = ddlacctype.options[ddlacctype.selectedIndex].value;
        if(selectedItem=='Postpaid')
        {
            ddlchargeType.options.namedItem("Tier").hidden = true;
            ddlchargeType.options.namedItem("Wallet").hidden = false;
        }
        else if(selectedItem=='Prepaid')
        {
            ddlchargeType.options.namedItem("Tier").hidden = true;
            ddlchargeType.options.namedItem("Wallet").hidden = false;
        }
    }
</script>

Collectives™ on Stack Overflow

Drop down options to hide using javascript

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related