Select 更改为 ajax

Question

我对 ajax 的更改有疑问。这是我的代码：

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

当我 select select 框时，它使我的浏览器挂起。如何修复它

//这是用于传递问题的虚拟文本，因为主要是代码：Lorem ipsum dolor sit amet, consectetur adipiscing elit在病床上的船。每局最重要的结果。很容易受宠若惊。在 vulputate sagittis 之前或在 nisl 之前的整个生命。明天会很有趣，不会害怕 eleifend 的成员。机场门口停着卡车中的亨德里特。完全柔软而不可恨。客户很重要，客户会跟着客户走。 fringilla sem 最重要的课程，在医院等待很方便。没有悲伤，只是沙拉的末端很软。它是 fusce, always and vulputate be amet, imperdiet sagitt ex

Answer 1

el是元素不是元素

的值

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

  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);
                }
            });
        }
    }

Select 更改为 ajax

Select Onchange with ajax

ajax

jquery

select

clone