クローンとselectbox onchangeは入力テキストの値を変更します

クローンと変更に問題があります。クローンとselectbox 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

ええ、私のような初心者のために非常に役立ちます..すべての値が変更されます..ありがとうマダリン –

人、 ajaxでブラウザがハングアップしますか？私はそれのようなajaxを追加しました： –

function showModel（el）{ if（el === ""）{ $（el）.siblings（ "input [name = model]"）val（ ""）; }他{ $アヤックス（{ URL： 'vendor_inout/vendor_inout_crud.php'、タイプ： 'POST'、データ型は 'JSON'、データ：{id_vendor_detail：エル、種類： "get_model"}、（data.nama_model + "" + "）; //モデルを取得する –

はこれを試してみてください：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

クローンとselectbox onchangeは入力テキストの値を変更します

答えて

関連する問題