Question

我有selectbox并且数据是由ajax发送的。这个HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="kode_hanca" onchange="showModel(this)" name="id_vendor_detail[]" class="form-control vendor" required="">
                                    <option value="">- PILIH -</option>
                                    <script>
                                        $("select#kode_hanca").on("click", function () {
                                            $.ajax({
                                                type: "POST",
                                                url: "vendor_inout/vendor_inout_crud.php",
                                                dataType: 'json',
                                                data: {type: "get_kode_hanca"}, //get_kode_hanca
                                                success: function (data) {
                                                    console.log(data);
                                                    var teks = "";
                                                    $.each(data.kode_hanca, function (index, val) { //looping table detail bahan
                                                        var id_vendor_detail = val.id_vendor_detail;
                                                        var kode_hanca = val.kode_hanca;

                                                        teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
                                                    });
                                                    $("#kode_hanca:last").append(teks);
                                                }
                                            });
                                        });
                                    </script>
                                </select>

数据被转换为json并且始终是dinamic。因此，每次我选择selectbox数据都必须再次加载。当我使用click或change时，它无法发送ajax。怎么解决呢？

Answer 1

“select”标签不能包含任何其他标签，它只能包含“option”标签。

尝试以下代码： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="kode_hanca" onchange="showModel(this)" name="id_vendor_detail[]" class="form-control vendor" required="">
<option value="">- PILIH -</option>
</select>

<script type="text/javascript">
    $("#kode_hanca").on("click", function () {
    $.ajax({
           type: "POST",
           url: "vendor_inout/vendor_inout_crud.php",
           dataType: 'json',
           data: {type: "get_kode_hanca"}, //get_kode_hanca
           success: function (data) {
               console.log(data);
               var teks = "";
               $.each(data.kode_hanca, function (index, val) { //looping table detail bahan
               var id_vendor_detail = val.id_vendor_detail;
               var kode_hanca = val.kode_hanca;

               teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
               });
                  $("#kode_hanca:last").append(teks);
             }
           });
        });
   </script>

您也可以使用“更改”，而不是“点击”。

<强>编辑： -

相反，您可以使用以下代码： -

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <select id="kode_hanca" onchange="myFunction();" name="id_vendor_detail[]" class="form-control vendor" required="">
        <option value="">- PILIH -</option>
        </select>

        <script type="text/javascript">

function myFunction()
{

showModel(this);

 $.ajax({
                   type: "POST",
                   url: "vendor_inout/vendor_inout_crud.php",
                   dataType: 'json',
                   data: {type: "get_kode_hanca"}, //get_kode_hanca
                   success: function (data) {
                       console.log(data);
                       var teks = "";
                       $.each(data.kode_hanca, function (index, val) { //looping table detail bahan
                       var id_vendor_detail = val.id_vendor_detail;
                       var kode_hanca = val.kode_hanca;

                       teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
                       });
                          $("#kode_hanca:last").append(teks);
                     }
                   });
}

           </script>

Answer 2

选择下拉列表，您应该尝试onchange功能。

<script type="text/javascript">
    $("#kode_hanca").on("change", function () {
    $.ajax({
           type: "POST",
           url: "vendor_inout/vendor_inout_crud.php",
           dataType: 'json',
           data: {type: "get_kode_hanca"}, //get_kode_hanca
           success: function (data) {
               console.log(data);
               var teks = "";
               $.each(data.kode_hanca, function (index, val) { //looping table detail bahan
               var id_vendor_detail = val.id_vendor_detail;
               var kode_hanca = val.kode_hanca;

               teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
               });
                  $("#kode_hanca:last").append(teks);
             }
           });
        });
   </script>

Answer 3

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function changeSelect() {
     $.ajax({
               type: "POST",
               url: "vendor_inout/vendor_inout_crud.php",
               dataType: 'json',
               data: {type: "get_kode_hanca"}, //get_kode_hanca
               success: function (data) {
                   console.log(data);
                   var teks = "";
                   $.each(data.kode_hanca, function (index, val) { //looping table detail bahan
                   var id_vendor_detail = val.id_vendor_detail;
                   var kode_hanca = val.kode_hanca;

                   teks += "<option class='target_append' value='" + id_vendor_detail + "'>" + kode_hanca + "</option>";
                   });
                      $("#kode_hanca:last").append(teks);
                 }
               });
}
</script>

<select id="kode_hanca" onClick="changeSelect(this.selectedIndex);" name="id_vendor_detail[]" class="target form-control vendor" required="">
<option value="">- PILIH -</option>
</select>

选择框点击并发送ajax

3 个答案: