How to Get Value From HTML Dropdown List using Jquery

Question

I have dropdown list and i want to retrieve data from database when select value of downlist. This is working without having error. But this is working when i click on dropdown list, not in dropdown value. That mean work only for default value. please help me how to rectify this error. code as below.

HTML code for Dropdown list

<select name="lab_no" id="lab-no" class="form-control">
    <option value="Lab 01" >Lab 01</option>
    <option value="Lab 02">Lab 02</option>
</select>

Jquery Code is Here

<script type="text/javascript">
    $(document).ready(function () {
        $("option").click(function () {
            var txt = $("#lab-no:selected").val();
            if (txt = '') {

            } else {
                $('#table-row').html('');
                $.ajax({
                    url: "../svr/com-list.php",
                    method: "post",
                    data: {search: txt},
                    dataType: "text",
                    success: function (data) {
                        $('#table-row').html(data);
                    }
                });
            }
        });
    });
</script>

Possible duplicate of [Get selected value of a dropdown's item using jQuery](https://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item-using-jquery) — bharat parmar, Aug 29 '17 at 06:34

score 1 · Answer 1 · answered Aug 29 '17 at 06:33

First you need to target your select $('#lab-no') and use change event instead of click. Then you can target the selected option.

  $(document).ready(function () {
    $("#lab-no").change(function () {
    var txt = $("select option:selected").val()
    console.log(txt)
    if (txt = '') {
    
    } else {
      $('#table-row').html('');
      $.ajax({
        url: "../svr/com-list.php",
        method: "post",
        data: {search: txt},
        dataType: "text",
        success: function (data) {
          $('#table-row').html(data);
        }
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="lab_no" id="lab-no" class="form-control">
  <option value="Lab 01" >Lab 01</option>
  <option value="Lab 02">Lab 02</option>
</select>

Mayank Vadiya · Answer 2 · 2017-08-29T06:53:12.287

0

You should try like this

1.You need to change jquery event

    <script type="text/javascript">
       $(document).ready(function () {
        $("#lab-no").change(function () {
          var txt = $("#lab-no").val();
             alert(txt) //place alert and check value. You will get values which you have selected
             if (txt == '') { //make changes here

             } else {
               $('#table-row').html('');
                 $.ajax({
                  url: "../svr/com-list.php",
                   method: "post",
                   data: {search: txt},
                   dataType: "text",
                   success: function (data) {
                      $('#table-row').html(data);
                    }
               });
           }
        });
   });
 </script>

edited Aug 29 '17 at 06:53

answered Aug 29 '17 at 06:22

Mayank Vadiya

1,437
2
19
32

same result occured – serverAdmin123 Aug 29 '17 at 06:27
which result you want to get? @EverythingWithUniverse – Mayank Vadiya Aug 29 '17 at 06:36
i want to retrieve data from database as follows, when i select lab 01, should be show computers belongs lab one and when select lab 02 should be show computers belongs to lab two. but both time shows only lab 01 computers – serverAdmin123 Aug 29 '17 at 06:43
try like this ``, don't add space in values – Mayank Vadiya Aug 29 '17 at 06:45
Alert working, but query is not working, query work only for lab 01, when select lab 02 result same as lab 01 – serverAdmin123 Aug 29 '17 at 06:57
but sir @EverythingWithUniverse where is your query? – Mayank Vadiya Aug 29 '17 at 06:58
"select * from computer where lab_no like '%".$_POST["search"]."%'"; – serverAdmin123 Aug 29 '17 at 07:01

score 0 · Answer 3 · answered Aug 29 '17 at 06:23

Try with $("#lab-no").change. This Way your event will trigger after you have made a change in the dropdown.

You should not use :selected in $("#lab-no:selected").val() since its not needed. $("#lab-no").val() will return the selected value.

Working Demo

$(document).ready(function() {
  $("#lab-no").change(function() {
    var txt = $("#lab-no").val();
    console.log(txt)
    if (txt = '') {

    } else {
      $('#table-row').html('');
      $.ajax({
        url: "../svr/com-list.php",
        method: "post",
        data: {
          'search': txt
        },
        dataType: "text",
        success: function(data) {
          $('#table-row').html(data);
        }
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="lab_no" id="lab-no" class="form-control">
    <option value="Lab 01">Lab 01</option>
    <option value="Lab 02">Lab 02</option>
</select>

@EverythingWithUniverse If you run my example you can see that it returns the selected value. Please clarify what is the problem — Carsten Løvbo Andersen, Aug 29 '17 at 06:29
i copied and pasted, but when i select lab 02, result same as lab 01 — serverAdmin123, Aug 29 '17 at 06:54

score 0 · Answer 4 · answered Aug 29 '17 at 06:25

0

You can use in simple way like:

var drpSelectedValue=$("#lab-no").val();

May this help for you.

answered Aug 29 '17 at 06:25

Kunvar Singh

1,779
2
13
21

How to Get Value From HTML Dropdown List using Jquery

4 Answers4