javascript - 每次单击按钮时显示一个下拉列表

Question

我有一个下拉列表。我一开始就将它隐藏了，但是每当单击特定按钮说 TEST 时，我都希望显示该列表。同样在每次点击时，我都希望它显示出来。如果按钮被点击 3 次，那么 3 个下拉菜单，依此类推。目前，单击按钮时下拉菜单仅显示一次。不要打扰里面的 PHP 代码。

<p>
<label for ="test">TEST:</label>
<input type="button" name="test" value="testing" onclick="display()"/>
<?php
    echo '<select name="LIVINGSTYLE" id="test">';
// some code here
    echo '</select>';
?>
</p>

我的 Javascript 函数：

function ondisplay()
{
   document.getElementById("test").style.display="block";
}

Answer 1

您的 onclick 处理程序是 display() 但是您的函数名称是 ondisplay

尝试这样的事情；尝试以下操作；

Javascript；

<script type="text/javascript">
function showHide(obj)
{
    var div = document.getElementById(obj);
    if (div.style.display == 'none')
    {
        div.style.display = '';
    }
    else
    {
        div.style.display = 'none';
    }
}
</script>

HTML;

<a href="javascript:void(0)" onclick="showHide('UMAR'); return false;">CLICK ME</a>
<div id="UMAR" style="display: none;">
Assalam-o-Alaikum !!!
</div>

Answer 2

jQuery 解决方案，这里有一个Fiddle，用它你可以显示无限的选择框。

<label for ="test">TEST:</label>
<input id="test" type="button" name="test" value="Testing"/>

$(function(){
   $('#test').click(function(){
      $('body').append('<select name="LIVINGSTYLE" id="test">'+
                       '<option value="1">Option 1</option>'+
                       '<option value="2">Option 2</option>'+
                       '<option value="3">Option 3</option>'+
                       '<option value="4">Option 4</option>'+
                       '</select>');
   });
});