javascript - 如何从javascript获取Bootstrap 3动态下拉模式对话框中的选定项目

Question

我正在使用 Bootstrap 3 显示带有下拉选择的模式对话框。下拉菜单允许用户选择 pdf 中的页面。它是在显示对话框之前动态填充的。该对话框运行良好，下拉列表已正确填充页面项目。

非工作代码在这里。

function choosePage(numPages) {
  var pdfPageSelector = document.getElementById("pdfPageSelector");
  for (var i = 1; i <= numPages; i++){
    var opt = document.createElement("option");
    var anchor = document.createElement("a");
    anchor.href = "#";
    anchor.id = "page_id";
    var text = document.createTextNode("page " + i);
    text.href = "#";
    anchor.appendChild(text);
    opt.appendChild(anchor);

    anchor.onclick = function() {
      alert('clicked');
    };
    pdfPageSelector.appendChild(opt);
  }
  
  $('#page_id').on('click', function(e){
    alert('clicked');
    e.preventDefault();  // Prevent the default anchor functionality
  });

  $('#page_id').click(function(e) {
    alert('clicked');
    e.preventDefault();  // Prevent the default anchor functionality
  });

}

choosePage(3);

<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.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="pdfChooseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Choose page to redact</h4>
      </div>
      <div class="modal-body">
        <div>
          Please choose page to redact.
        </div>

        <select class="form-control" id="pdfPageSelector">
        </select>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="pageChosen()">Choose</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Bootstrap 3 改变了下拉选择的实现方式。我不知道如何读取所选项目的索引或值。后备方法是实现一个在选择元素时触发的事件(旧的 Bootstrap 2 方法似乎不再起作用)。

我尝试在纯 JavaScript 中添加 onclick 事件处理程序:

var anchor = document.createElement("a");
anchor.id = "page_id";
anchor.onclick = function() {
  alert('clicked');
};

我尝试在 jQuery 中添加 .click 和 .on:

$('#page_id').on('click', function(e){
  e.preventDefault();  // Prevent the default anchor functionality.
  alert('clicked');
});

或.click

$('#page_id').click(function(e) {
  e.preventDefault();  // Prevent the default anchor functionality.
  alert('clicked');
});

我错过了什么？

Answer 1

必须明白，当您使用select时html 标签，您将不会收到任何点击事件 select标签或其 option标签。 你只会有onchange select 的事件标签。当您从下拉列表中选择任何选项时，我已完成以下操作，警报将会出现，并且我已绑定(bind) onchange 事件，如下所示:

 $('#pdfPageSelector').on('change',function(e){
    alert('fired');
  });

function choosePage(numPages) {
  var pdfPageSelector = document.getElementById("pdfPageSelector");
  for (var i = 1; i <= numPages; i++){
    var opt = document.createElement("option");
    var anchor = document.createElement("a");
    anchor.href = "#";
    anchor.id = "page_id";
    var text = document.createTextNode("page " + i);
    text.href = "#";
    anchor.appendChild(text);
    opt.appendChild(anchor);

    anchor.onclick = function() {
      alert('clicked');
    };
    pdfPageSelector.appendChild(opt);
  }
  
  $('#pdfPageSelector').on('change',function(e){
    alert('fired');
  });
  
  $('#page_id').on('click', function(e){
    alert('clicked');
    e.preventDefault();  // Prevent the default anchor functionality
  });

  $('#page_id').click(function(e) {
    alert('clicked');
    e.preventDefault();  // Prevent the default anchor functionality
  });

}

choosePage(3);

<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.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="pdfChooseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Choose page to redact</h4>
      </div>
      <div class="modal-body">
        <div>
          Please choose page to redact.
        </div>

        <select class="form-control" id="pdfPageSelector">
        </select>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="pageChosen()">Choose</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->