如果在html5中声明

我正在创建一个网站。我有一个页面，我有一个下拉列表，我想这样做，当用户选择“其他”选项时出现一个文本框。我怎么做？如果在html5中声明

这里是我的代码：

<!DOCTYPE html> 
<html> 
<html lang = "en"> 
<body> 

<p id="demo"></p> 

<h1>What would you like it to say?</h1> 

<p>Commmon Requests:</p> 

<form action="input" action="random.html" method="get"> 
<select name="requests"> 
<option value="blank"> </option> 
<option value="good morning sir">Good Morning Sir</option> 
<option value="good morning madam">Good Morning Madam</option> 
<option value="other">Other</option> 
<input type="submit" value="Submit"> 
</select> 
</form> 

<br><br><textarea rows="3" cols="30"> 
Write a request here if you would like to hear it. 
</textarea> 

</body> 
</html>

来源

2013-07-03 user2542058

你应该保持下拉列表外的提交按钮。 – IcyFlame

如果我的答案是确切的，那么你需要接受它作为答案。 – Sudarshan

下工作过：

<!DOCTYPE html> 
<html lang = "en"> 
<body> 

     <p id="demo"></p> 

     <h1>What would you like it to say?</h1> 

     <p>Common Requests:</p> 

     <form action="input" action="random.html" method="get"> 

     <select name="requests" onchange="checkIfOther();" id="dropDown1"> 

     <option value="blank"> </option> 
     <option value="good morning sir">Good Morning Sir</option> 
     <option value="good morning madam">Good Morning Madam</option> 
     <option value="other">Other</option> 

     </select> 

     <input type="submit" value="Submit"/> 
     </form> 

     <div id="other" style="display:none"> 

      <label>Other(Please explain):</label><input type="text" id="otherText"/> 


     </div> 

     <br><br><textarea rows="3" cols="30"> 
     Write a request here if you would like to hear it. 
     </textarea> 

</body> 
</html> 

<script> 

    function checkIfOther(){ 

     a = document.getElementById("dropDown1");   

     if(a.value == "other")   

      document.getElementById("other").setAttribute("style","display:inline"); 

     else 

      document.getElementById("other").setAttribute("style","display:none"); 


     } 

</script>

来源

2013-07-03 05:19:13 IcyFlame

附加一个“的onchange”事件到你选择的元素与检查哪个选项是选定值的函数，如果是“其他”选项，改变一个隐藏的文本从隐藏到可见。示例如下：

<form action="input" action="random.html" method="get"> 
    <select id="requestDropDown" name="requests" onchange="checkOption()"> 
     .... 
    </select> 
    <input type="text" id="otherBox" style="visibility:hidden;"/> 
</form>

我添加了隐藏的输入元素，如果您选择“其他”选项，将会显示输入元素。

然后，在checkOption()函数中，检查是否选择了其他，并根据该更改可见性。例如：

function checkOption(){ 
    //This will fire on changing of the value of "requests" 
    var dropDown = document.getElementById("requestDropDown"); 
    var textBox = document.getElementById("otherBox"); 

    if(dropDown.value == "other"){ 
     textBox.style.visibility = "visible"; 
    } 

}

它简单而简洁。

来源

2013-07-03 04:59:35 John

^我该怎么做？ – user2542058

查看我的更新回答。 – John

这对使用Javascript来说非常简单。除了构建网站内容之外，不要将HTML用于其他任何内容。

<form method="post" action=""> 
<select name="requests" onchange="openbox(this);"> 
    ... 
    <option value="other">Other</option> 
</select> 
</form> 
... 
<textarea rows="3" cols="30" hidden> 
Write a request here if you would like to hear it. 
</textarea>

而且在Javaascript，

function openbox(requests) { 
    if(requests.selectedIndex == 3) { 
     //Remove the 'hidden' property' 
    } else { 
     //Add the 'hidden' property 
    } 
}

编辑：当你说的文本框，我认为由于某种原因警报。 W3C学校参考：http://www.w3schools.com/tags/att_global_hidden.asp

来源

2013-07-03 05:10:19 tverghis

Working Demo

HTML

<body> 
<p id="demo"> 
</p> 
<h1> 
    What would you like it to say?</h1> 
<p> 
    Commmon Requests:</p> 
<form action="input" id="form1" action="random.html" method="get"> 
<select name="requests" onchange="check(this)"> 
    <option value="blank"></option> 
    <option value="good morning sir">Good Morning Sir</option> 
    <option value="good morning madam">Good Morning Madam</option> 
    <option value="other">Other</option> 
    <input type="submit" value="Submit"> 
</select> 
</form> 
<br> 
<br> 
<textarea rows="3" cols="30">

如果你想听到它，请在这里写一个请求。

的Javascript

function check(that) { 
     if (that.value === "other") { 
      var textBox = document.createElement('input'); 
      textBox.setAttribute("type", "text"); 
      textBox.setAttribute("id", "newTextBox"); 
      document.getElementById('form1').appendChild(textBox); 
     } 

     else { 
      var box = document.getElementById('newTextBox'); 
      if (box) 
       box.parentNode.removeChild(box); 
     } 
    }

来源

2013-07-03 05:20:57 Sudarshan

如果在html5中声明

回答

相关问题