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>