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

Question

How do i set and update value of help text for below code?

The HTML Code:

<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>

And the JSON data from which the values need to be set:

<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

You can do it using grep() method like following.

 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>