选择Onchange with ajax

时间:2016-09-30 07:13:08

标签: jquery ajax select clone

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

当我选择选择框时,它会让我的浏览器挂起。怎么解决?

//这是用于传递问题的虚拟文本,因为大多数代码:Lorem ipsum dolor sit amet,consectetur adipiscing elit。在lectus orci的Phasellus。 Quisque maximus hendrerit consequat。 Donec blandit facilisis est。整数ac massa vitae ante vulputate sagittis nec at nisl。克拉斯坐下来,他们是一个无聊的人。在erat aliquet hendrerit的Duis porta nisl。整数mollis non odio et pellentesque。 Lorem ipsum dolor坐下来,精致的adipistur elit。 Suspendisse cursus fringilla sem,facilisis malesuada orci varius in.Nullam tristique nisi sed sem mattis,finibus magna mollis。 Fusce erat sem,semper ac vulputate sit amet,imperdiet sagittis ex

1 个答案:

答案 0 :(得分:2)

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