Basic JavaScript program

Question

I want to Visible the combo Box named Cities when i click the Country Pakistan.. but the combo box visibility remains Hidden.. how do i do so ? I think my Code is correct but it is not working :s .. Help Required..

<body>
<form id="form1" runat="server">
<div>           
    <select id="Items" name="Countries">
        <option id="Pakistan" onClick="VisibileTrue()">Pakistan</option>
        <option id="Taiwan">Taiwan</option>
    </select>        
    <select id="Items2" name="Cities" style="display:none">        
        <option>Karachi</option>
        <option>Sindh</option>        
    </select>
</div>
</form>
</body>

<script language="javascript" type="text/javascript">    
    function VisibileTrue() {    
        var element = document.getElementById(Pakistan);
        if(element == Pakistan)
        {
            var element2 = document.getElementsByTagName("Items2");
            element2.style.display = "inline";
        }
    }
</script>

Walter Bugliarelli · Accepted Answer · 2010-12-26 09:04:15Z

2

is this acceptable?:

   1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="stackoverflow.aspx.cs"
   2     Inherits="aspnetdiprova.stackoverflow" %>
   3 
   4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   5 <html xmlns="http://www.w3.org/1999/xhtml">
   6 <head runat="server">
   7     <title></title>
   8 
   9     <script type="text/javascript">
  10         function VisibileTrue() {
  11             var element = document.getElementById("Countries");
  12             if (element.value == "Pakistan") {
  13                 var element2 = document.getElementById("Items2"); 
  14                 element2.style.display = "inline";
  15             }
  16          }
  17     </script>
  18 
  19 </head>
  20 <body>
  21     <form id="form1" runat="server">
  22     <div>
  23         <select id="Items" name="Countries" onchange="VisibileTrue()">
  24             <option value="Pakistan">Pakistan</option>
  25             <option value="Taiwan">Taiwan</option>
  26         </select>
  27         <select id="Items2" name="Cities" style="display: none">
  28             <option>Karachi</option>
  29             <option>Sindh</option>
  30         </select>
  31     </div>
  32     </form>
  33 </body>
  34 </html>
  35

answered Dec 26, 2010 at 9:04

Walter Bugliarelli

713 bronze badges

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

1 Comment

Abid Ali Over a year ago

thank you for the answer but it was too late for me :).. i did the same thing and was happily working :).. thank you walter

alfred · Accepted Answer · 2010-12-26 08:47:44Z

1

this is javascript question. you should use the onchange event on the select.

<select id="Items" name = "Countries" onchange="check(this)">
</select>


function check(elem) {
    alert (elem.options[elem.selectedIndex].innerHTML)
}

answered Dec 26, 2010 at 8:47

alfred

1,01810 silver badges13 bronze badges

1 Comment

Abid Ali Over a year ago

i wanted to do such that when i select the country from the combo box, the city combo box visible to true and corresponding cities against the selected country are shown in the city combo box..

user447356 · Accepted Answer · 2010-12-26 11:54:58Z

As the others have said already, you need to use the onchange event of the drop down list itself, the option tag has no events of its own.

You also have to add value to each option in order to identify the selected value, and remove the meaningless id from each option.

Your HTML should look like this:

<select id="Items" name = "Countries" onchange="CountryChanged(this);">
    <option value="Pakistan">Pakistan</option>
    <option value="Taiwan">Taiwan</option>
</select>

And the required JavaScript:

<script type="text/javascript">
function CountryChanged(oDDL) {
    var blnPakistan = (oDDL.value.toLowerCase() == "pakistan");
    var oCityDDL = oDDL.form.elements["Cities"];
    if (oCityDDL)
        oCityDDL.style.display = blnPakistan ? "" : "none";
}
</script>

This will show the Cities drop down when Pakistan is selected and hide it back when other value is being selected.

Collectives™ on Stack Overflow

Basic JavaScript program

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related