selectbox单击并发送ajax

Question

我有selectbox发送的选择selectbox和数据。 这个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，并且始终是动态的。 因此，每当我选择选择selectbox数据时，都必须再次加载。 当我使用click或change其无法发送Ajax时。 怎么解决呢？

Answer 1

“选择”标签不能包含任何其他标签，只能包含“选项”标签。

尝试下面的代码：-

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