基于下拉选择的jQuery更新帮助文本

Question

如何为以下代码设置和更新帮助文本的值？

的HTML代码：

<select class="form-control" id="product-id" name="product-id"> 
    <option value="2">Beauty Products</option> 
    <option value="6">Health Products</option> 
    <option value="7">Gaming Products</option> 
</select> 
<p class="text-info" id="help-text">Total images: 5000/Used in last project: 2000</p> 

而且JSON数据从该值需要进行设置：

<script> 
    var keyCount = 
    [{"id":"2","name":"Beauty Products","img_count":"5000","img_used":"2000"}, 
    {"id":"6","name":"Health Products","img_count":"7000","img_used":"4001-7000"}, 
    {"id":"7","name":"Gaming Products","img_count":"9500","key_used":"0"}] 
</script> 

Answer 1

可以使用grep()法像它后面做。

var keyCount = 
 
    [{ "id": "2", "name": "Beauty Products", "img_count": "5000", "img_used": "2000" }, 
 
    { "id": "6", "name": "Health Products", "img_count": "7000", "img_used": "4001-7000" }, 
 
    { "id": "7", "name": "Gaming Products", "img_count": "9500", "key_used": "0" }] 
 

 
$('#product-id').change(function() { 
 
    var val = this.value; 
 
    var obj = $.grep(keyCount, function (item, index) { 
 
     return item.id == val; 
 
    })[0]; 
 
     
 
    $('#help-text').text('Total images: ' + obj.img_count + '/Used in last project: ' + obj.img_used); 
 
}).change(); //auto execute when page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" id="product-id" name="product-id"> 
 
    <option value="2">Beauty Products</option> 
 
    <option value="6">Health Products</option> 
 
    <option value="7">Gaming Products</option> 
 
</select> 
 
<p class="text-info" id="help-text"></p>