如何使用Jquery從HTML下拉列表中獲取價值

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

你應該這樣嘗試

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>

Answer 3

嘗試$("#lab-no").change 。 這樣，在下拉列表中進行更改后，事件將觸發。

您不應在$("#lab-no:selected").val()使用:selected ，因為它不需要。 $("#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

您可以使用以下簡單方式：

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

希望對您有幫助。