[英]get dropdown text from bootstrap modal
我尝试从引导程序模态获取下拉文本值,当我调用val()时做得很好,但是当我调用text()来检索下拉文本时,它返回的是下拉文本堆栈
这是我的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> </head> <body> <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".category-modal">Select Category</button> <!-- hidden fields to store modal result in --> <div class="form-group"> <label for="main-pages" class="col-lg-4 control-label">this should contain index from page dropdown : </label> <input type="text" id="main-pages"> </div> <div class="form-group"> <label for="main-sub-pages" class="col-lg-4 control-label">this should contain text from sub-page dropdown : </label> <input type="text" id="main-sub-pages"> </div> <div class="modal fade category-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form method="post" action="" class="form-horizontal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Category</h4> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="text-center"> <h4>Pages</h4> </div> </div> <div class="col-lg-4"> <div class="text-center"> <h4>Sub Pages</h4> </div> </div> <div class="col-lg-4"> <div class="text-center"></div> <h4></h4> </div> </div> <div class="row"> <div class="col-lg-4"> <select id="pages" name="pages" class="form-control" size="6"> <option value="1">Hello</option> <option value="2">Kon'nichiwa</option> <option value="3">Assalamualaikum</option> <option value="4">Annyeonghaseyo</option> <option value="5">Ciao</option> </select> </div> <div class="col-lg-4"> <select id="sub-pages" name="pages" class="form-control" size="6"> <option value="1">Hello</option> <option value="2">Kon'nichiwa</option> <option value="3">Assalamualaikum</option> <option value="4">Annyeonghaseyo</option> <option value="5">Ciao</option> </select> </div> <div class="col-lg-4"> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="login()">Save changes</button> </div> </form> </div> </div> </div> <script type="text/javascript"> //called when user clicks login function login() { $("#main-pages").val($("#pages").val()); $("#main-sub-pages").val($("#sub-pages").text()); $(".category-modal").modal("hide"); } $('.category-modal').on('hidden', function() { console.log('page : '+$("#main-pages").val()); console.log('sub-page : '+$("#main-sub-pages").text()); }); </script> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html>
注意:您需要在第二个文本输入上移动光标以查看下拉文本
更改
console.log('page : '+$("#main-pages").val());
console.log('sub-page : '+$("#main-sub-pages").text());
对此
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
解决了!!
这是解决方案
改变这条线
<script type="text/javascript">
//called when user clicks login
function login() {
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val($("#sub-pages").text());
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
});
</script>
对此
<script type="text/javascript">
//called when user clicks login
function login() {
var subPagesSelect = document.getElementById("sub-pages");
var selectedText = subPagesSelect.options[subPagesSelect.selectedIndex].text;
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val(selectedText);
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
});
</script>
为什么我得到所有下拉菜单内容,因为我所说的是一个对象而不是该对象的内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.