Question

我已经检查了其他答案，但它们似乎都不适合我。我有一个带有下拉列表的隐藏DIV的表单。我希望它只在单击按钮时才可见。我用一个按钮创建了以下代码。因此，当单击按钮时，它将显示隐藏的div，但每次单击按钮时，都没有发生。

这是我的代码：

<form action="_form.php" method="POST">
    <div class="row">
    <input type=button value="Already a Supplier" name="supplier">      
    </div>
 </form>

 <?php 
    if(isset($_POST['supplier']))
    {
??php

<div class="row" style="visibility: hidden" name="suppliers">
<?php $supplier = SupplierHead::model()->findAll();
      $list = CHtml::listData($supplier ,'head_id','head_name'); 
      echo $form->DropDownList($model,'party_id', 
      $list, array('prompt'=>'Select Supplier')); 
?>
</div>

<?php

  }
?>

Answer 1

使用如下的jQuery。使用display代替visibility

<div class="row" id="toshow" style="display:none" name="suppliers"> <?php $supplier = SupplierHead::model()->findAll();
       $list = CHtml::listData($supplier ,'head_id','head_name'); 
       echo $form->DropDownList($model,'party_id', 
       $list, array('prompt'=>'Select Supplier'));  ?> </div>

    <button id="abutton">Click</button>

    <script>
    $(document).ready(function() {
       $("#abutton").click(function(e){
          e.preventDefault();
          $("#toshow").css('display', 'block');
       });
    });
    </script>

Answer 2

试试这个

<script>
    function show() 
            {
                document.getElementById("suppliers").style.visibility = "visible";
            }
</script>

<div class="row" id="suppliers" style="visibility:hidden" name="suppliers">Content of div</div>
<input type="button" value="show" onClick="show()"/>

Answer 3

使用jQuery的.show()方法。

这是一个小提琴：http://jsfiddle.net/q2Ru5/

HTML：

<select class="hideDefault">
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

<button class="unHide">Unhide the dropdown</button>

CSS：

 .hideDefault { display: none; }

jQuery：

$(".unHide").click(function() {
    $(".hideDefault").show();
});

您实际上在做的是加载下拉列表，隐藏它，并等待带有.unHide类的按钮上的click（）事件，并通过定位（或选择）类来显示下拉列表。

可能值得注意的是，如果你以前没有使用过jQuery，你必须引用一个jQuery库来使用它。

单击按钮后显示DIV

3 个答案: