克隆并选择输入文本的值

clone and selectbox onchange change value of input text

本文关键字：文本 输入 选择      更新时间：2023-09-26

我的克隆和更改有问题。

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

当我克隆数据时，它显示许多选择框。当我选择选择框，我想改变<input type='text' name='show'>从if else的值。我该怎么办?

dummy text: Lorem ipsum dolor sit amet, consecteter adipiscingelit。雄角上的Phasellus。最大限度的后果。完成了平滑的设施测试。整型的质量在秃顶前矢状面在黄昏。这是一种很好的方法ac木棒。Duis porta指的是一个人的身份。整数mollis非音频和pellentesque。我爱你，我爱你，我爱你adipiscing elit。悬浮花序短穗状花序，具花序兽人进来了。Nullam tristique nisi sed sem mattis, a finibus magnamollis。熔断器直立，长尾或长尾，直立，不生sagittis例

执行以下操作:清空克隆后的输入，在更改时选择相对于select的show输入:

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

试试: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();
});
相关文章：