Question

我有一个下拉列表。当有人单击下拉列表中的“其他”选项时，会出现一个空白行，允许某人编写自己的请求。我想创建一个警告框，用大粗体字母显示某人在空行中写的内容。我该怎么做？

这是我的代码：

<form action="">
    <select name="requests" onchange ="checkIfOther();" id="dropDown1">
    <option value="blank"></option>
    <option value="good morning sir">Good Morning Sir</option>
    <option value="temperature">The current temperature is _____ centigrade.</option>
    <option value="other">Other</option>    
</select>
</form>

 </p>
 <button onclick="myFunction()" value>Submit</button>

     <div id="other" style="display:none">  
         <br><br><label>Optional Request: </label><input type="text" id="otherText"/>

         </div>

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

<script>
   function myFunction(){
       var x=document.getElementById("dropDown1");
       alert("You have chosen: " + x.options[x.selectedIndex].text);
       if(x.value == "other"){
           b=document.getElementById("other"); 
               alert("You have chosen: " + b.text); //what do I do?
               }   
           }
</script>

Answer 1

尝试使用Jquery，这是代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

function myFunction(){
    alert('You have chosen: '+$("#otherText").val());
}

function checkIfOther()
{
    $("#otherText").val('');
    ($("#dropDown1").val() == 'other') ?  $("#other").show() :  $("#other").hide();
}

</script>

让我知道这有用吗？。

Answer 2

但我做了类似的事......

<script type="text/javascript">
    function mySubmit(){
        var x=document.getElementById("dropDown1");
        if(x.value == "other"){
            alert("You have chosen: " + otherText.value); 
        }
        else {  
            alert("You have chosen: " + x.options[x.selectedIndex].text);
        }
    }   
</script>

警报框以html5显示书面文字

2 个答案: