如果在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中聲明

回答

相關問題