正しいカテゴリに入力を追加するJQUERY

Question

私が追加するアイテムは、正しいカテゴリと一度に1つだけにしたい。しかし、同時に私は乳製品とフルーツのセクションに入る製品を同時に得るように見える。誰でも私を助けてくれますか？果物の果物から

$('#catty').change(function() { 
 
    if ($(this).val() == 'Dairy') { 
 
     $('#product-info').keydown(function (e) { 
 
      if (e.keyCode == 13) { 
 
       var add = $('#product-info').val(); 
 
       $('.dairy-product').append('<li>' + add + '</li>'); 
 
      } 
 
     }) 
 
    } 
 
}); 
 

 

 

 

 
$('#catty').change(function() { 
 
    if ($(this).val() == 'Fruits') { 
 
     $('#product-info').keydown(function (e) { 
 
      if (e.keyCode == 13) { 
 
       var add = $('#product-info').val(); 
 
       $('.fruit-product').append('<li>' + add + '</li>'); 
 
      } 
 
     }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="catty" class="form-control" value="Select"> 
 
    <option hidden >Select Catergory</option> 
 

 
    <option>Dairy</option> 
 
    <option>Frozen Foods</option> 
 
    <option>Fruits</option> 
 
    <option>Vegetables</option> 
 
    
 
</select> 
 
<div class="form-group"> 
 

 
    <input type="text" class="form-control" id="product-info" placeholder="Item Name"> 
 
    </div> 
 
<button type="button" id="btn1" class="btn btn-primary">Add Item</button> 
 
</form> 
 
</div> 
 

 
<div class="panel-group col-xs-12"> 
 

 
<div class="category"> 
 
    <div class="my-panel parent"> 
 
    <p class="description" id="dairy">Dairy</p> 
 
    <a href="#" class="add-item"> 
 
     <i class="fa fa-plus-circle" aria-hidden="true"></i> 
 
    </a> 
 
    </div> 
 
<ol class="dairy-product"></ol> 
 

 

 
</div> 
 

 

 

 
<div class="category"> 
 
    <div class="my-panel parent"> 
 
    <p class="description" id="fruits">Fruits</p> 
 
    <a href="#" class="add-item"> 
 
     <i class="fa fa-plus-circle" aria-hidden="true"></i> 
 
    </a> 
 
    </div> 
 
    <ol class="fruit-product"></ol> 
 

 
    
 
</div>

Answer 1

$('#product-info').keydown(function(e) { 
 
    var selectid = $('#catty option:selected').text().toLowerCase() 
 
    if (e.keyCode == 13) { 
 
    var add = $('#product-info').val(); 
 
    
 
    $("."+selectid +'-product').append('<li>' + add + '</li>'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="catty" class="form-control" value="Select"> 
 
    <option hidden>Select Catergory</option> 
 

 
    <option>Dairy</option> 
 
    <option>Frozen Foods</option> 
 
    <option>Fruits</option> 
 
    <option>Vegetables</option> 
 

 
</select> 
 
<div class="form-group"> 
 

 
    <input type="text" class="form-control" id="product-info" placeholder="Item Name"> 
 
</div> 
 
<button type="button" id="btn1" class="btn btn-primary">Add Item</button> 
 
</form> 
 
</div> 
 

 
<div class="panel-group col-xs-12"> 
 

 
    <div class="category"> 
 
    <div class="my-panel parent"> 
 
     <p class="description" id="dairy">Dairy</p> 
 
     <a href="#" class="add-item"> 
 
     <i class="fa fa-plus-circle" aria-hidden="true"></i> 
 
     </a> 
 
    </div> 
 
    <ol class="dairy-product"></ol> 
 

 

 
    </div> 
 

 

 

 
    <div class="category"> 
 
    <div class="my-panel parent"> 
 
     <p class="description" id="fruits">Fruits</p> 
 
     <a href="#" class="add-item"> 
 
     <i class="fa fa-plus-circle" aria-hidden="true"></i> 
 
     </a> 
 
    </div> 
 
    <ol class="fruits-product"></ol> 
 

 

 
    </div>

1. 変更OLクラス：ここに私のコードです。
2. 選択の変更機能を呼び出す必要はありません。現在選択されている値を取得し、Enterキーのパラメータとして使用します。何も選択

Answer 2

で選択されなかった場合

はあなたがID cattyを持つ要素のための2つonchangeイベントハンドラを持って検証を追加することを確認します。また、これら2つのハンドラの同じ要素にある​​の2つのイベントハンドラもあります。 コードを変更してハンドラーを簡略化します。

$('#product-info').keydown(function(e) { 
    if (e.keyCode == 13) { 
     var add = $('#product-info').val(); 
     var value = $("#catty").text(); 
     if(value !== '') { 
      $('.' + value.toLowerCase() + '-product').append('<li>' + add + '</li>'); 
     } 
    } 
});