使用模式弹出窗口的 Javascript 选择控件答案

【问题标题】：Javascript select control using modal popup使用模式弹出窗口的 Javascript 选择控件
【发布时间】：2016-08-18 17:26:16
【问题描述】：

是否有人知道将常规选择选项下拉转换为基于模式弹出选择控件的 javascript 控件/库？

例如，当您单击下图中的下拉菜单时，它会打开带有选项的弹出窗口，您可以选择任何选项

点击上方打开下方弹出窗口。

有人遇到过这样的控制吗？还是我需要自己开发？

谢谢

【问题讨论】：

你想打开模型点击什么？
我认为您需要开发自己的解决方案，这很容易。如果您需要先机，请告诉我...

标签： javascript html twitter-bootstrap angular-ui-bootstrap bootstrap-modal

【解决方案1】：

这是示例模式

//Listening to click event on the above hidden div
$(document).on('click','#select',function(){
  //Launch the modal on click event
	$('#myModal').modal();
});

//Listen to click event on Modal's buttons having class option
$(document).on('click','.option',function(){
  //Extract the text of the clicked element
	var option_text = $(this).text();
  //Set the text and value of option 
  $('#selected').text(option_text).val(option_text);
  //Close the modal
	$('#myModal').modal('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Your Select Tag, it is readonly to prevent dropdown-->
<Select name="select"  readonly>
  <option id="selected" value="1" selected>Option 1</option> 
</Select>
<!-- Hidden div to get the click events-->
 <div id="select" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>

<!-- Example Modal, make the required changes -->
<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">
        <div class="btn btn-primary option">
          Hello
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

【讨论】：

【解决方案2】：

我假设您正在使用引导程序。如果是这种情况，您可以执行以下操作：

JavaScript

$(window).load(function(){
    $("#dropdown").change(function(){
        $('#myModal').modal('show');
        var selected =  $("#dropdown").val();
        $(selected).addClass("active");
    }
});

【讨论】：

这怎么能带来模态的所有选项？此外，这不会让用户从模态中选择另一个项目。不确定此代码将如何工作。