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 — bharat parmar
– bharat parmar, Commented Aug 29, 2017 at 6:34

Andrew · Accepted Answer · 2017-08-29 06:33:47Z

1

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>

answered Aug 29, 2017 at 6:33

Andrew

4493 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carsten Løvbo Andersen · Accepted Answer · 2017-08-29 06:23:26Z

0

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>

answered Aug 29, 2017 at 6:23

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

2 Comments

Carsten Løvbo Andersen Over a year ago

@EverythingWithUniverse If you run my example you can see that it returns the selected value. Please clarify what is the problem

serverAdmin123 Over a year ago

i copied and pasted, but when i select lab 02, result same as lab 01

Kunvar Singh · Accepted Answer · 2017-08-29 06:25:21Z

0

You can use in simple way like:

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

May this help for you.

answered Aug 29, 2017 at 6:25

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

Comments

Mayank Vadiya · Accepted Answer · 2017-08-29 06:53:12Z

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, 2017 at 6:53

answered Aug 29, 2017 at 6:22

Mayank Vadiya

1,4512 gold badges19 silver badges32 bronze badges

7 Comments

serverAdmin123 Over a year ago

same result occured

Mayank Vadiya Over a year ago

which result you want to get? @EverythingWithUniverse

serverAdmin123 Over a year ago

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

Mayank Vadiya Over a year ago

try like this <option value="Lab 02">Lab-02</option>, don't add space in values

serverAdmin123 Over a year ago

Alert working, but query is not working, query work only for lab 01, when select lab 02 result same as lab 01

|

Collectives™ on Stack Overflow

How to Get Value From HTML Dropdown List using Jquery

4 Answers 4

Comments

2 Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related