Question

有没有办法包装HTML按钮，以便它们显示在下拉列表中？

我有以下两个按钮：

<button type='button' class='btn btn-default' data-toggle='modal' data-
target='#authorize'>Show Demo Card Details</button>     
        <button type='button' class='btn btn-default' data-toggle='modal' 
data-target='#test'>Show Demo Card Details</button>

我希望可以从下拉列表中访问它们，是否可以使用html？

Answer 1

基于标记，我假设您正在使用Bootstrap。您无法使用纯HTML在<select>元素中执行此操作。如果您正在使用其余的Bootstrap功能，那么您可以使用Bootstrap的下拉菜单并执行类似下面的操作。请注意，您可能需要为event.preventDefault()内的<a>元素执行li，并且您可能需要执行更多CSS以使其按您希望的方式工作。

顺便说一下，你真的不需要<button>来触发模态。例如，将下面下拉列表中的最后一项更改为类似的内容也可以：

<li><a href="#" data-toggle="modal" data-target="#myModal">JavaScript</a></li>

＆＃13;

.dropdown li span {
  display: inline-block;
  min-width: 100px;
}

＆＃13;

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<! -- Bootstrap Dropdown -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#">
        <span>Try this </span>
        <button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#authorize'>Show Demo Card Details</button>
      </a>

    </li>
    <li>
      <a href="#">
        <span href="#">Try another?</span>
        <button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#myModal'>Show Demo Card Details</button>
      </a>
    </li>
    <li><a href="#" class="bg-info" data-toggle="modal" data-target="#myModal">JavaScript</a></li>
  </ul>
</div>


<!-- Example modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

</body>

＆＃13;

Answer 2

你可以简单地在你的html

中添加这样的内容

<option data-toggle='modal' data-
target='#authorize'>Show Demo #authorize Details</option>
<option data-toggle='modal' 
data-target='#test'>Show Demo #test Details</option>

在下拉列表中包装HTML按钮

2 个答案: