当用户单击 <select> 中的 <option> 时显示引导模式窗口答案

【问题标题】：Show Bootstrap-modal window when user clicks on <option> in <select>当用户单击 <select> 中的 <option> 时显示引导模式窗口
【发布时间】：2015-04-08 06:03:02
【问题描述】：

当用户单击 Select 标签中显示的选项之一时，我正在尝试显示一个大型引导模式（也使用 Bootstrap 设计）

<select name="choice" class="selectpicker" data-style="btn-primary" style="overflow:visible;">
	<optgroup label="Please make a choice">
	  <option value="1" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">1st choice</option>
	  <option value="2" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">2nd choice</option>
	  <option value="3" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">3rd choice</option>
	</optgroup>
</select>




	  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
      </div>

它没有显示任何东西。我不能在选项标签中这样做还是我做错了？

谢谢

【问题讨论】：

你在使用 selectpicker 插件吗？
是的，我正在使用 bootstrap-select.js。这就是冲突的来源，我注意到如果我从 Select 标签中删除 class="selectpicker" 它可以工作，但是我的选择表单被搞砸了。我仍然不明白如何解决这个冲突

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

您必须编写一个小脚本。试试这个

$(document).ready(function(){
	$('.modal-content').hide();
	var selectvalue=$('select').val();
	$('select').click(function(){
	  if($('select').val() != selectvalue){
		$('.modal-content').show();
	  }
	  else{
		$('.modal-content').hide();
	  }
	})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<select name="choice" class="selectpicker" data-style="btn-primary" style="overflow:visible;">
	<optgroup label="Please make a choice">
	  <option value="1" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">1st choice</option>
	  <option value="2" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">2nd choice</option>
	  <option value="3" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">3rd choice</option>
	</optgroup>
</select>




	  <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
      </div>

【讨论】：

【解决方案2】：

感谢您的回答。我注意到由于 selectpicker 插件存在某种冲突。

我复制粘贴下面代码的更完整部分（我之前尝试将其最小化以简化，但这样做可能会省略重要信息）

<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-select.js"></script>


    <div class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">[...]</h4>
          </div>
		  <form action="page.php" method="post" target="_top">
          <div class="modal-body">

			<select name="choice" class="selectpicker" data-style="btn-primary" style="overflow:visible;">
				<optgroup label="Please make a choice">
					  <option value="1" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">1st choice</option>
					  <option value="2" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">2nd choice</option>
					  <option value="3" data-subtext="Lorem ipsum Lorem ipsum" data-toggle="modal" data-target=".bs-example-modal-lg">3rd choice</option>
				</optgroup>
			</select>		


          </div>
         <div class="modal-footer">
           [...]
         </div>
		  </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
	
	
	
	
	
	
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">

			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				  <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
				</div>
				<div class="modal-body">
				  ...
				</div>
			</div>
	  
		</div>
	</div>

我尝试使用 Vipin 的脚本，但找不到解决冲突的方法。

【讨论】：