Question

我在这里遇到了一个问题。在页面加载我想隐藏div面板。一旦用户选择了我想在div中显示获取价格的值。

这是我的计划。

我对两个问题感到震惊

** I am unable to show the div once user selects an Option。

I am unable to set the value inside the div。**

<html>
<head>
<title>Online Book Store</title>
<script>
function displayResult(selTag)
{
var x=selTag.options[selTag.selectedIndex].value;
mydiv = document.getElementById("panel");
mydiv.style.visibility = "block"; //to show it
document.getElementById("field_name").innerHTML = x;
}


function hideDiv()
{
    mydiv = document.getElementById("panel");
    mydiv.style.display = "none"; //to hide it  
}
</script>
</head>
<Body Bgcolor = "wheat" onload="hideDiv()">
<center>
<h2> welcome to online shopping</h2>
<form Action = "./onlinebookstore">
select Book
 <select name = "book" onchange="displayResult(this)">
 <option></option>
 <option value=  111>C programming language</option>
 <option value = 112>Java programming language</option>
 <option value = 112>Network analysis</option>
 <option value = 114>Advaced computer Networks</option> 
 <option value =115>Programming analysis</option>
 <option value = 116>Advanced data strctures</option>
 <option value = 117>Advanced java and web technologies</option>
 <option value = 118>Electronic devices</option>
 <option value = 119>Computer Graphics</option>
 <option value = 120>Microprocessors</option>
 <option value = 121>Oracle</option>
 </select>
 <br><br>
  quantity <Input type = "text" name = "Quantity">
 <br><br>

  <br><br>
 <div id="panel">
 Price <div id="field_name">TEXT GOES HERE</div>
</div>
 <br><br>

 <input type = "submit" name = "s" value = "ADDItem">
 <input type = "submit" name = "s" value = "Removeitem">
 <input type = "submit" name = "s" value = "showitems">
 <input type = "submit" value = "Logout" name = "s">
 </form>
</center>
</Body>
</html>

有人可以帮助我吗

Answer 1

您正在混合并匹配可见性和隐藏。

变化：

mydiv.style.visibility = "block"; // This value is invalid.

到

mydiv.style.display= "block";

如果通过调用display:none隐藏元素，则visiblity对它没有影响（即使可见性属性值正确）

调用hide()中的window.onload或元素后的正文结尾。
重温您的选项值，他们在其中有空格（至少是小提琴）。
您可以使用.value直接访问选择选择值，即selTag.value

<强> Demo

无法动态显示div并为其设置内容

1 个答案: