克隆和選擇框onchange輸入文本的更改值

我有克隆和更改問題。克隆和選擇框onchange輸入文本的更改值

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

當我克隆的數據，其顯示出許多選擇框。當我選擇選擇框時，我想要根據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

來源

2016-09-30 wawan Setiyawan

請運行該片段 –

與虛擬文字是什麼？ – madalinivascu

輸入值在更改selectbox選項時確實發生了變化，最新的問題實際上是 –

執行以下操作：克隆後清除輸入，在改變選擇的節目輸入，是相對於選擇：

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

來源

2016-09-30 04:16:29 madalinivascu

是的，它對我這樣的初學者非常有幫助..謝謝madalin –

傢伙，爲什麼如果我組合它與Ajax使瀏覽器掛起？我添加了像這樣的阿賈克斯： –

function showModel（el）{el ===「」）{ $（el）.siblings（「input [name = model]」）。val（「」）; }其他{ $阿賈克斯（{ 網址： 'vendor_inout/vendor_inout_crud.php'，類型： 'POST'，數據類型： 'JSON'，數據：{id_vendor_detail：EL，鍵入：「get_model」}， //獲取模型dan ukuran –

試試這個：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(); 
});

來源

2016-09-30 04:40:21

克隆和選擇框onchange輸入文本的更改值

回答

相關問題