从引导模式获取下拉文本

我尝试从引导模式获取下拉文本值，当我调用val（）它很好地完成时，但是当我调用text（）来检索下拉文本时，它将返回下拉文本的堆栈从引导模式获取下拉文本

这是我的代码

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <meta charset="UTF-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
\t <!-- 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">&times;</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>

记：你需要把光标移到第二个文本输入看到下拉菜单文本

来源

2015-02-23 stacheldraht27

解决！

这是解决方案

改变这一行

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

为什么我得到了所有下拉列表的内容，因为我所说的是一个对象不是该对象的内容纠正我，如果我错了

来源

2015-02-24 02:55:58 stacheldraht27

变化

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

来源

2015-02-23 23:17:10 IAteYourKitten

仍然显示以前的结果 – stacheldraht27 2015-02-24 00:53:25

从引导模式获取下拉文本

回答

相关问题