如何獲得在引導從JavaScript

Question

我使用引導3，以顯示與在下拉選擇一個模式對話框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 -->

引導3改變了下拉列表中選擇的實現方式。我無法弄清楚如何讀取所選項目的索引或值。後退是實現一個事件，當元素被選中時觸發（舊的Bootstrap 2方法似乎不再有效）。

我曾嘗試在純JavaScript添加的onclick事件處理程序：

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

我曾嘗試加入。點擊和。對jQuery中：

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

或。點擊

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

我錯過了什麼？

Answer 1

必須明白，當您使用select標籤的HTML，你不會得到任何點擊事件要麼select標籤或其option標籤。 你只會有onchange事件的select標籤。我已經做了如下當您選擇從下拉菜單的任何選項，警報會來和我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 -->

Answer 2

要擴大innodel的回答（和清理代碼示例）

的選擇和選項元素是標準的HTML元素：

爲了得到一個回調隨時ŧ他用戶更改選擇，添加.onchange事件處理程序：

<select class="form-control" id="pdfPageSelector" onchange="alert(this.value)"> 

要想從JavaScript中選擇的值，使用：

var dropdownSelector = document.getElementById("pdfPageSelector"); 
console.log(dropdownSelector.value); 

更新的工作代碼爲：

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

 
    // Basic html method: 
 
    pdfPageSelector.onchange = function() { 
 
     var pdfPageSelector = document.getElementById("pdfPageSelector"); 
 
     var selectionValue = pdfPageSelector.value; 
 
     alert('Basic onchange fired with value: ' + selectionValue); 
 
    }; 
 
    pdfPageSelector.appendChild(opt); 
 
    } 
 
    
 
    // jQuery method: 
 
    $('#pdfPageSelector').on('change',function(e){ 
 
     var selectionValue = this.value; 
 
     alert('jQuery onchange fired with value: ' + selectionValue); 
 
    }); 
 
} 
 

 
// Called when button is pressed. 
 
function pageChosen() { 
 
    var pdfPageSelector = document.getElementById("pdfPageSelector"); 
 
    var selectionValue = pdfPageSelector.value; 
 
    alert('Chosen item: ' + selectionValue); 
 
} 
 

 
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" onchange="alert(this.value)"> 
 
     </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 -->