根据用户输入在输入字段中显示数据
问题描述:
我有这种基于第一个输入字段显示食物名称的简单表单。根据用户输入在输入字段中显示数据
它正在工作,但我喜欢为类别(水果,肉类,蔬菜)添加另一个字段。
我怎样才能在最后一个字段
前显示食品的范畴。 1 - 苹果 - 水果
感谢
CODE
var obj = {
1:'Apple',
2:'Chicken',
3:'Carrots',
4:'Mango',
5:'Beef',
6:'Squash'
}
$('#num').on('keyup',function() {
var key = $(this).val(),
result = obj[key],
$category = $('#category')
if (result != undefined) {
$category.val(result);
} else {
$category.val('');
}
})
FIDDLE
答
怎么样对象的数组。
function food(id, food, category) {
var self = this;
this.id = id;
this.food = food;
this.category = category;
};
function model() {
var self = this;
this.foods = [];
}
var mymodel = new model();
$(function() {
mymodel.foods.push(new food(1, 'Apple', 'Fruit'));
mymodel.foods.push(new food(2, 'Chicken', 'Meat'));
mymodel.foods.push(new food(3, 'Carrots', 'Vegetable'));
mymodel.foods.push(new food(4, 'Mango', 'Fruit'));
mymodel.foods.push(new food(5, 'Beef', 'Meat'));
mymodel.foods.push(new food(6, 'Squash', 'Vegetable'));
$('#num').on('keyup change', function() {
var key = $(this).val();
$category = $('#category')
$food = $('#food')
$category.val('');
$food.val('');
$.each(mymodel.foods, function(index, item) {
if (item.id == key) {
$category.val(item.category);
$food.val(item.food);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="num" class="form-control" name="number" placeholder="Enter Section Number">
<input type="text" id="category" class="form-control" name="category">
<input type="text" id="food" class="form-control" name="food">
+0
哇,谢谢先生。我可以使用此代码以备将来使用。 –
而你的问题是什么? – empiric
对不起,先生,我忘了。我怎样才能显示在最后一个领域的类别..就像我输入1它会显示苹果和水果 –