Как получить значение из раскрывающегося списка HTML с помощью Jquery

Question

У меня есть выпадающий список, и я хочу получить данные из базы данных, когда выберите значение из списка. Это работает без ошибок. Но это работает, когда я нажимаю на выпадающий список, а не в раскрывающемся списке. Это означает, что работа только для значения по умолчанию. Пожалуйста, помогите мне, как исправить эту ошибку. код, как показано ниже.

HTML-код для выпадающего списка

<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 здесь

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

Answer 1

Сначала вы должны нацелить ваш выбор $('#lab-no') и использовать change событие вместо click, Затем вы можете выбрать выбранную опцию.

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

Answer 2

Вы можете использовать простым способом, как:

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

Пусть это поможет вам.

Answer 3

Попробуй с $("#lab-no").change, Таким образом, ваше событие сработает после внесения изменений в раскрывающемся списке.

Вы не должны использовать :selected в $("#lab-no:selected").val() так как его не нужно. $("#lab-no").val() вернет выбранное значение.

Рабочая Демо

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

Answer 4

Вы должны попробовать вот так

1. Вам нужно изменить событие jquery

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