stackoom
  简体   繁体   中英

clone and selectbox onchange change value of input text

 原文  2016-09-30 03:59:56  8   2    javascript/ jquery/ select/ clone

Question

i have problem with clone and change. 

 $(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:has(select)").addClass("select2"); } $('body').on('click', '.btn_kurangi_barang', function() { $(this).closest('.barang_in_clone').remove(); }); function showModel(id){ if(id === ''){ $("input[name=show]").val(""); }else if(id === "1"){ $("input[name=show]").val("foo"); }else if(id === "2"){ $("input[name=show]").val("bar"); }else{ $("input[name=show]").val("too"); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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.value)' 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 clone data, its show many selectbox. and when i select the selectbox, i want to change <input type='text' name='show'> by value from if else . how can i do ?

dummy text : 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

2 answers

solution1
 1 ACCPTED  2016-09-30 04:16:29

Do the following: clear the input after the cloning, at change select the show input that is relative to the select: 

 $(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(); }); function showModel(el){ if(el.value === ''){ $(el).siblings("input[name=show]").val(""); }else if(el.value === "1"){ $(el).siblings("input[name=show]").val("foo"); }else if(el.value === "2"){ $(el).siblings("input[name=show]").val("bar"); }else{ $(el).siblings("input[name=show]").val("too"); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

solution2
 1  2016-09-30 04:40:21

Try this: https://jsfiddle.net/9t01777r/

HTML 

<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 onclick="removeBarang(this)" 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>

Javascript 

var addBarang = function() {
   var new_barang = $(".hidden_input").find(".barang_in").clone(true).addClass("barang_in_clone");
   $(".target_clone").append(new_barang);
   //          $(".barang_in_clone:has(select)").addClass("select2");
}
var showModel = function(obj) {
   var id = $(obj).val();
   if (id === '') {
      $(obj).closest('.barang_in').find('input[name=show]').val("");
   } else if (id === "1") {
      $(obj).closest('.barang_in').find('input[name=show]').val("foo");
   } else if (id === "2") {
      $(obj).closest('.barang_in').find('input[name=show]').val("bar");
   } else {
      $(obj).closest('.barang_in').find('input[name=show]').val("too");
   }
}

var removeBarang = function(ths) {
   $(ths).closest('.barang_in_clone').remove();
}
$(function() {
   addBarang();
});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How To Change Some attribute of One Input Onchange Selectbox Change value of input onchange? How to change each textbox value based on onchange each selectbox React change input value onChange Change width of selectbox if no value Unable to change value in input onChange in React JS Nextjs: onChange input not change value on self Clone form input value as text immediately Change text input value How to access data-value in a selectbox during onchange event
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM