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>