javascript - 克隆和选择框 onchange 更改输入文本的值

标签 javascript jquery select clone

我在克隆和更改方面遇到问题。

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

最佳答案

执行以下操作:克隆后清除输入,在更改时选择与选择相关的显示输入:

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

关于javascript - 克隆和选择框 onchange 更改输入文本的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39783467/

相关文章:

javascript - 面对php、mysql中的Make Like Like Button使用ajax调用

javascript - 如何在html中嵌入文本文件?

javascript - 使用 JQuery 旋转人字形

javascript - 在特定日期(或范围)显示 div

php - 在mysql中的一个查询中选择行以及总计数

sql - 如何将 SQL 选择查询更改为 SQL Server CE 中的新表?

javascript - THREE.js intersects[0].object.position 始终返回 (0,0,0)

javascript - 如何设置元素的宽度等于窗口的宽度?

javascript - jquery $getJSON 数组不显示全部

mysql - 选择具有最大 id 值的表行