用ajax选择Onchange

本文介绍了用ajax选择Onchange的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对用ajax进行更改有疑问.这是我的代码:

i have problem with change by ajax. this is my code :

$(document).ready(function() {
  addBarang();
});

function addBarang() {
  var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");
  $(".target_clone:last").append(new_barang);
  $(".barang_in_clone:last").find("input[name=show]").val('');
  //        $(".barang_in_clone:has(select)").addClass("select2");
}

$('body').on('click', '.btn_kurangi_barang', function() {
  $(this).closest('.barang_in_clone').remove();
});

 //Tampilkan model ketika memilih kode hanca
    function showModel(el) {
        if (el === "") {
            $(el).siblings("input[name=model]").val("");
        } else {
            $.ajax({
                url: 'vendor_inout/vendor_inout_crud.php',
                type: 'POST',
                dataType: 'JSON',
                data: {id_vendor_detail: el, type: "get_model"}, //get model dan ukuran
                success: function (data) {
                    console.log(data);
                    $(el).siblings("input[name=model]").val(data.nama_model + " " + "(" + data.ukuran + ")");
                },
                error: function (e) {
                    //called when there is an error
                    console.log(e.message);
                }
            });
        }
    }

<body>
  <div class="hidden_input" style="display: none">
    <div class="barang_in">
      <label class="col-md-4 control-label">Kode Hanca</label>
      <select onchange='showModel(this)' name="id_vendor_detail" class="form-control" required="">
        <option value="">- PILIH -</option>
        <option value="1">- Orange -</option>
        <option value="2">- Pink -</option>
        <option value="3">- Red -</option>

      </select>
      <button onclick="addBarang()" type="button" data-toggle="tooltip" data-placement="top" title="tambah vendor" class="btn btn-info btn-flat btn-xs pull-left btn_tambah_vendor"><i class="fa fa-plus"></i> add</button>
      <button type="button" data-toggle="tooltip" data-placement="top" title="kurangi barang" class="btn btn-danger btn-flat btn-xs pull-right btn_kurangi_barang"><i class="fa fa-minus"></i> Remove</button>
      <input type='text' name='show'>
    </div>
  </div>
  <div class='target_clone'>
  </div>

</body>

当我选择选择框时，它会使我的浏览器挂起.如何解决呢?

when i select the selectbox, it make my browser hang . how to fix it ?

//这是用于传递问题的伪文本，因为主要是代码:Lorem ipsum dolor坐在amet处，可以使您轻松自如.恋母的菜豆. Quisque maximus hendrerit结果. Donec blandit促进了在其他国家/地区的整数ac mass avitae ante vulputate sagittis的交易. Cras sit amet sem nec metus sodales eleifend a ac nulla. Duis porta nisl in eret aliquet hendrerit.非整数和非整数. Lorem ipsum dolor坐下，一直保持着高贵的状态. Suspendisse cursus fringilla sem，facilisis malesuada orci varius in.Nullam tristique nisi sed sem mattis，一种雌性无花果. Fusce erat sem，semper ac vulputate坐在amet，不礼貌的射手座ex

//this is dummy text for pass the question because mostly code : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at lectus orci. Quisque maximus hendrerit consequat. Donec blandit facilisis est. Integer ac massa vitae ante vulputate sagittis nec at nisl. Cras sit amet sem nec metus sodales eleifend a ac nulla. Duis porta nisl in erat aliquet hendrerit. Integer mollis non odio et pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fringilla sem, facilisis malesuada orci varius in. Nullam tristique nisi sed sem mattis, a finibus magna mollis. Fusce erat sem, semper ac vulputate sit amet, imperdiet sagittis ex

推荐答案

el是元素而不是元素的值

el is the element not the value of the element

使用el.value来获取所选值，或者通过jquery来获取$(el).val();

use el.value to get the selected value or $(el).val(); via jquery

  function showModel(el) {
        if (el.value === "") {
            $(el).siblings("input[name=model]").val("");
        } else {
            $.ajax({
                url: 'vendor_inout/vendor_inout_crud.php',
                type: 'POST',
                dataType: 'JSON',
                data: {id_vendor_detail: el.value, type: "get_model"}, //get model dan ukuran
                success: function (data) {
                    console.log(data);
                    $(el).closest('.barang_in').find("input[name='model']").val(data.nama_model + " " + "(" + data.ukuran + ")");//get the parent element and then find the input
                },
                error: function (e) {
                    //called when there is an error
                    console.log(e.message);
                }
            });
        }
    }

这篇关于用ajax选择Onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！