我有一个带有几个下拉菜单的bootstrap模式。我想要的是当我点击其中一个下拉列表中的项目 - 模态应该关闭时 - 应该抓取点击的文本并将其放置在跨度“target”中名为“choice”的锚标记中。
这是我尝试的脚本,但它不起作用:
<script>
$(" .dropdown-menu li a").click(function () {
$("#target").text($(this).text());
$('#myModal').modal('hide');
});
</script>
这是HTML:
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Tittle"</h2>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<h2>Title</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id=" menu1" data-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing4</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<h2>Title</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing5</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing6</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing7</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing8</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<h2>Title</h2>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">Fafairs</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">somthing</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#choice">Other</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="spacer">
<a name="choice"></a>
</div>
<h2><span class="label label-danger">Here goes <span id="target"></span> text</span></h2>