Question

当用户点击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>

虽然没有显示任何内容。我不能在Option标签中做到这一点，或者我做错了吗？

由于

Answer 1

你必须写一个小脚本。试试这个

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

感谢您的回答。我注意到因为selectpicker插件而存在冲突。

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

＆＃13;

<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>

＆＃13;

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

当用户点击<select> </select> </option>中的<option>时，显示Bootstrap-modal窗口

2 个答案: