Javascript select 使用模态弹出控件

Question

有人知道 javascript control/library 将常规 select 选项下拉转换为基于模式弹出窗口的 select 控件吗？

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

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

有人遇到过这样的控件吗？或者我需要自己开发？

谢谢

Answer 1

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

JavaScript

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

Answer 2

这是示例模态

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

Javascript select 使用模态弹出控件

Javascript select control using modal popup

html

javascript

twitter-bootstrap

angular-ui-bootstrap

bootstrap-modal