我尝试从bootstrap模式获取下拉文本值，当我调用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>
注意：您需要将光标移动到第二个文本输入上以查看下拉文本
答案 0 :(得分：0)
更改
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());
答案 1 :(得分：0)
解决!!
这是解决方案
更改此行
<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>
为什么我得到所有下拉内容，因为我称之为对象不是该对象的内容如果我错了就纠正我