CODEWITHSUNDEEP
javascript
Abid Ali
Abid Ali

Reputation: 1747

Basic JavaScript program

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>

Upvotes: 0

Views: 345

Answers (3)

Shadow Wizard
Shadow Wizard

Reputation: 66389

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.

Upvotes: 1

Walter Bugliarelli
Walter Bugliarelli

Reputation: 71

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

Upvotes: 2

alfred
alfred

Reputation: 1018

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

Upvotes: 1

Related Questions