使用模态弹出窗口的Javascript选择控件

Question

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

例如，当您单击下方图像中的下拉列表时，会打开弹出的选项，您可以选择任何选项

点击上面的

点击弹出窗口。

有没有人遇到任何这样的控制？或者我需要自己开发？

由于

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

Answer 2

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

的JavaScript

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