はjqueryのに

Question

HTMLを使用して選択します。しかし問題がある。 何かを選択すると、選択に従って入力フィールドが作成されます。次に、jqueryで生成された入力に何かを書き込んだり、selectから別のオプションを選択した場合は、古い入力と入力に書き込まれた値を消去しています。

予想される出力：jqueryによって生成された入力で、何かを書き込むと、複数選択から別のオプションを選択した後に同じ値を含める必要があります。

：任意のヘルプ？それが原因でラインのです

Answer 1

だけjQuery('#add-amt').html(""); .its更新変更選択オプション

のdivのたびに空になります行を削除し

1. 防止の重複は
2. を更新
3. 選択解除オプションは配列を作成追加します。それぞれの選択を検証し、配列を使用すると、HTMLを削除するjQuery('#add-amt').html("");あなたがミスを犯し、重複値がここ

var arr=[]; 
 
jQuery('#additional').change(function() { 
 
// jQuery('#add-amt').html(""); 
 

 
    jQuery('#additional > option:selected').each(function() { 
 
    var val = jQuery(this).val(); 
 
    var res = jQuery('#additional > option:selected').map(function(){ 
 
       return $(this).val() 
 
    }).get() 
 
    if(!arr.includes(val)){ 
 
     arr.push(val) 
 
    jQuery('#add-amt').append('<div class="col-sm-3" data-value="'+val+'"><div><label>' + val + ' Amount</label></div><input type="text" name="additional[' + val + ']" placeholder="' + val + '"></div>'); 
 
    } 
 
    else{ 
 
     arr.forEach(function(a,b){ 
 
      if(!res.includes(a)){ 
 
      arr.splice(b,1); 
 
      $('div .col-sm-3[data-value="'+a+'"]').remove() 
 
      } 
 
     }) 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="additional" name="additional" multiple=""> 
 
<option value="Shipping Expences">Shipping Expences</option> 
 
<option value="Packaging Expences">Packaging Expences</option> 
 
<option value="Comission Expences">Comission Expences</option> 
 
<option value="something">something</option> 
 
<option value="hnjghj">hnjghj</option> 
 
</select> 
 
<div id="add-amt"></div>

Answer 2

は、以前の内容はクリアされます：

jQuery('#add-amt').html(""); 

それはあなたの作業出力になります削除します。

スニペット

$(function() { 
 
    jQuery('#additional').change(function(){ 
 
    jQuery('#add-amt').html(""); 
 
    jQuery('#additional > option:selected').each(function() { 
 
     var val = jQuery(this).val(); 
 
     jQuery('#add-amt').append('<div class="col-sm-3"><div><label>'+val+' Amount</label></div><input type="text" name="additional['+val+']" placeholder="'+val+'"></div>'); 
 
    }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<select id="additional" name="additional" multiple=""> 
 
    <option value="Shipping Expences">Shipping Expences</option> 
 
    <option value="Packaging Expences">Packaging Expences</option> 
 
    <option value="Comission Expences">Comission Expences</option> 
 
    <option value="something">something</option> 
 
    <option value="hnjghj">hnjghj</option> 
 
</select> 
 
<div id="add-amt"></div>

Answer 3

を付加しないarray.Inにこの時間を選択された値をプッシュし.Thenではありません。

これを試してください。

jQuery('#additional').change(function(){ 
 
    //jQuery('#add-amt').html(""); 
 
    jQuery('#additional > option:selected').each(function() { 
 
     var val = jQuery(this).val(); 
 
     jQuery('#add-amt').append('<div class="col-sm-3"><div><label>'+val+' Amount</label></div><input type="text" name="additional['+val+']" placeholder="'+val+'"></div>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="additional" name="additional" multiple=""> 
 
     <option value="Shipping Expences">Shipping Expences</option> 
 
     <option value="Packaging Expences">Packaging Expences</option> 
 
     <option value="Comission Expences">Comission Expences</option> 
 
     <option value="something">something</option> 
 
     <option value="hnjghj">hnjghj</option> 
 
    </select> 
 
    <div id="add-amt"></div>