如何在单击按钮时打开下拉菜单？答案

【问题标题】：How to open dropdown on click of button?如何在单击按钮时打开下拉菜单？
【发布时间】：2015-07-13 05:14:13
【问题描述】：

我的 html 页面上有一个下拉菜单，该页面上有一个按钮。现在我想在用户单击按钮时执行类似的操作，然后下拉菜单将打开。

按钮：-

 <a href="javascript:void(0);" id="84" class="add_award_ready"><i class="fa fa-plus"></i></a>

下拉菜单：-

<select id="instructor_student_award_id" name="instructor_student_award[id]">
 <option value="">Select</option>
 <option value="21">ss1</option>
 <option value="25">E++</option>
 <option value="26">F++</option>
 <option value="27">t1</option>
</select>

我试过这个jquery代码

$('.add_award_ready').click(function(){
  student_id = $(this).attr('id');
  var element = $('#add_award_form_' + student_id + ' select')[0], worked = false;
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    } 
}

但这只会工作一次。如果我再次单击按钮，则下拉菜单不会打开。怎么了？

提前致谢。

【问题讨论】：

jsfiddle.net/k667L5ns/2
我想你可以看看这个stackoverflow.com/questions/249192/…>
对我不起作用。 @GeorgeLica
你能发布你的下拉菜单和按钮代码吗？

标签： javascript jquery html ruby-on-rails-3 ruby-on-rails-4

【解决方案1】：

        <div style="text-align: right;float:right;margin: 0;">
                <a id="OpenDialog" href="javascript:void(0)" onclick="aopen()" > <i class="fa fa-plus"></i> Add Policy</a>                        
              </div>
              <script>
    function aopen()
    {
        $("#dialog").dialog({modal: true, height: 500, width: 800 });
    }
    function close_popup()
    {
        //alert('HEllo');
        $("#dialog").dialog('close');            
    }
    </script>


    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <div id="dialog" title="Add Policy" style="display: none;" >
        <div class="box box-primary" >
            <!-- form start -->
            <form role="form" action="<?php echo site_url('policy/submit_data');?>" method="post">
              <div class="box-body">
                <div class="form-group">
                  <label for="exampleInputEmail1">Category Name</label>
                  <select class="form-control" name="category">
                        <option value=""> -- Category --</option>
                        <?php foreach($category as $value) {?>
                        <option value="<?php echo $value->cate_name; ?>"><?php echo $value->cate_name; ?></option> 
                        <?php } ?>
                  </select>

                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Sub Category</label>
                  <select class="form-control" name="sub_category">
                        <option value=""> -- SUB category --</option>
                        <?php foreach($sub_cate as $value) {?>
                        <option value="<?php echo $value->cate_id; ?>"><?php echo $value->sub_cate; ?></option> 
                        <?php } ?>
                  </select>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Description</label>
                  <div class='box-body pad'>
                        <textarea class="textarea" id="desc" name="description"  placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>                          
                    </div>
                  </div>
                </div>                    
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" onclick="return close_popup();" class="btn btn-primary">Cancel</button>
              </div>
            </form>
          </div>
    </div>

【讨论】：

感谢您的回答，但我说的是您提到对话框的下拉菜单。
下沉删除所有字段并在 HTML 上保存“选择”标签。（这个 html 代码）。使用只需单击按钮而不是调用 id=dialog。

【解决方案2】：

将按钮和下拉菜单放在两个不同的div标签内 如下所示，由 ids 提供。

<div id="myButton">
<a href="javascript:void(0);" id="84" class="add_award_ready"><i class="fa fa-plus"></i></a>
</div>

<div id="mySelect">
<select id="instructor_student_award_id" name="instructor_student_award[id]">
 <option value="">Select</option>
 <option value="21">ss1</option>
 <option value="25">E++</option>
 <option value="26">F++</option>
 <option value="27">t1</option>
</select>
</div>

然后使用下面的脚本代码

$("#mySelect").hide();
$("#myButton").click(function(e){
   $("#mySelect").toggle('slow');//or just show instead of toggle
});

Example Fiddle

【讨论】：

谢谢。但我不是在谈论切换 div。它不适用于。 @帕万
@sank 你能用下拉代码和按钮代码更新你的帖子吗？
您的上述答案显示并隐藏下拉菜单，但这不是我的问题。我想要这个jsfiddle.net/FVZkX，但这只会在页面刷新后工作一次。但我希望点击按钮。如果我点击按钮并且如果下拉菜单可见，那么它将隐藏，如果它是隐藏的，那么点击它会显示下拉菜单，但默认情况下它是打开的，我不想再点击一次用于从下拉列表中选择选项的下拉列表。请帮帮我。

【解决方案3】：

这对我有用。

setTimeout(function(){
 var element = $('#add_award_form_' + student_id + ' select')[0], worked = false;
 if (document.createEvent) {
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  worked = element.dispatchEvent(e);
 } 
},100);

我使用了超时，因为当我再次单击按钮时，mousedown 事件将不会触发，因为它有 2 个事件，所以我延迟了一个事件。它完全按照我的意愿工作。

【讨论】：