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()方法执行此操作，如下所示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: