stackoom
  简体   繁体   中英

get dropdown text from bootstrap modal

 原文  2015-02-23 23:12:59  4   2    javascript/ jquery/ html/ css/ twitter-bootstrap

Question

i try to get dropdown text value from bootstrap modal, when i call val() it done nicely, but when i call text() to retrieve dropdown text, it is returning stack of dropdown text

this my code 

 <!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">&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>

note : you need to move the cursor on second text input to see dropdown text

2 answers

solution1
 0  2015-02-23 23:17:10

Change 

 console.log('page : '+$("#main-pages").val());
 console.log('sub-page : '+$("#main-sub-pages").text());

To This 

 console.log('page : '+$("#main-pages :selected").val());
 console.log('sub-page : '+$("#main-sub-pages :selected").text());

solution2
 0 ACCPTED  2015-02-24 02:55:58

solved!!

this is the solution

change this line 

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

to this 

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

why i got all dropdown content, because what i call was an object not content of that object Correct me if im wrong

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Get selected text from bootstrap dropdown bootstrap modal not working from dropdown Trigger modal from bootstrap dropdown menu JS Bootstrap get curent text from dropdown (without actions) Get Input from Bootstrap Modal How to get selected item in Bootstrap 3 dynamic dropdown modal dialog from javascript bootstrap working for dropdown, but not for modal Update select input text from dropdown in modal? Result from jquery function to text in bootstrap modal Prevent bootstrap modal from being pushed when a dropdown list appears
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM