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>
3 Answers 3
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
1 Comment
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)
}
1 Comment
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.