clone 和 selectbox onchange 更改输入文本的值

Question

我对克隆和更改有疑问。

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

当我克隆数据时，它显示许多 select 框。当我 select select 框时，我想根据 if else 的值更改 <input type='text' name='show'> 。我该怎么办？

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

Answer 1

执行以下操作：在克隆后清除输入，更改 select 相对于 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>

Answer 2

试试这个：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();
});

clone 和 selectbox onchange 更改输入文本的值

clone and selectbox onchange change value of input text

javascript

jquery

select

clone