CODEWITHSUNDEEP
javascripthtmldrop-down-menuhtml-selecthidden
BruceyBandit
BruceyBandit

Reputation: 4324

Drop down options to hide using javascript

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>

Upvotes: 0

Views: 54669

Answers (7)

Hasiya
Hasiya

Reputation: 1458

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>

Upvotes: 0

AnshuM
AnshuM

Reputation: 11

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";
}

Upvotes: 1

balach
balach

Reputation: 97

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 ;)

Upvotes: 6

George
George

Reputation: 6084

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>

Upvotes: 1

Mathana Prithiviraj
Mathana Prithiviraj

Reputation: 69

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

Upvotes: 2

Jake Feasel
Jake Feasel

Reputation: 16955

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?
}
}

Upvotes: 0

Phrogz
Phrogz

Reputation: 303207

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

Upvotes: 0

Related Questions