将输入附加到正确的类别JQUERY

Question

我希望添加的项目属于正确的类别，并且一次只能包含一个。 但看来我同时将产品运入乳制品和水果部门。 谁能帮我吗？ 这是我的代码：

 $('#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. 不需要调用select的change函数，只需获取当前选择的值，然后将其用作Enter键的参数即可。
3. 如果在选择中未选择任何内容，请确保添加验证

Answer 2

对于id为catty的元素，您有两个onchange事件处理程序。 还有两个事件处理程序，用于在这两个onchange处理程序中的同一元素上进行keydown 。 修改您的代码，以便简化处理程序：

$('#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>');
        }
    }
});