Question

我希望在点击国家巴基斯坦时，可以看到名为Cities的组合框..但组合框可见性仍然隐藏..我该怎么办？我认为我的代码是正确的，但它不起作用：s ..需要帮助..

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

Answer 1

这是可以接受的吗？：

   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

Answer 2

这是javascript问题。你应该在select上使用onchange事件。

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


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

Answer 3

正如其他人已经说过的那样，您需要使用下拉列表本身的onchange事件，option标记没有自己的事件。

您还必须为每个选项添加value以识别所选值，并从每个选项中删除无意义的id。

您的HTML应如下所示：

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

所需的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>

这将显示选择巴基斯坦时的Cities下拉列表，并在选择其他值时将其隐藏。

基本的JavaScript程序

3 个答案: