HTML 使用 Javascript 从 JSON 中选择检查数据值

Question

我有 html 选择值和输入值，所以如果我可以选择值，我需要选择值从 JSON 中获取数据，然后将值返回到输入值

请检查下面的代码

<select name="bundle_typeCode" id="bundle_typeCode" class="form-control">
   <option value="153">200min Onnet Voice</option>
   <option value="101">1GB Data Bundle</option>
   <option value="162">5GB Night & Weekend Data Bundle</option>
   <option value="102">3GB Data Bundle</option>
   <option value="161">5GB Data Bundle</option>
   <option value="164">7GB Anytime data plan</option>
   <option value="144">10GB Night & Weekend Data Bundle</option>
   <option value="103">10GB Data Bundle</option>
   <option value="145">20GB Night & Weekend Data Bundle</option>
   <option value="104">20GB Data Bundle</option>
   <option value="105">50GB Data Bundle</option>
   <option value="142">100GB Data Bundle</option>
   <option value="100">500MB Data Bundle</option>
   <option value="143">200GB Data Bundle</option>
</select>

<br/><br/>

<input type="text" name="bundle_amount" id="bundle_amount" value="" placeholder="Bundle Value">

JSON file
{  
"details":{  
"numberOfBundles":14,
"bundles":[  
{  
"amount":0.0,
"description":"200min Onnet Voice",
"typeCode":153
},
{  
"amount":1.0,
"description":"1GB Data Bundle",
"typeCode":101
},
{  
"amount":400.0,
"description":"5GB Night & Weekend Data Bundle",
"typeCode":162
     },
     {  
        "amount":3000.0,
        "description":"3GB Data Bundle",
        "typeCode":102
     },
     {  
        "amount":5000.0,
        "description":"5GB Data Bundle",
        "typeCode":161
     },
     {  
        "amount":5000.0,
        "description":"7GB Anytime data plan",
        "typeCode":164
     },
     {  
        "amount":7500.0,
        "description":"10GB Night & Weekend Data Bundle",
        "typeCode":144
     },
     {  
        "amount":9000.0,
        "description":"10GB Data Bundle",
        "typeCode":103
     },
     {  
        "amount":14000.0,
        "description":"20GB Night & Weekend Data Bundle",
        "typeCode":145
     },
     {  
        "amount":17000.0,
        "description":"20GB Data Bundle",
        "typeCode":104
     },
     {  
        "amount":36000.0,
        "description":"50GB Data Bundle",
        "typeCode":105
     },
     {  
        "amount":70000.0,
        "description":"100GB Data Bundle",
        "typeCode":142
     },
     {  
        "amount":5E+5,
        "description":"500MB Data Bundle",
        "typeCode":100
     },
     {  
        "amount":5E+5,
        "description":"200GB Data Bundle",
        "typeCode":143
}
]
}
}

在我的波纹管代码中，如果我可以选择 Bundle name javascript 来获取 JSON 文件的价格，然后显示在 Bundle 数量输入中。

谢谢。

Answer 1

在select 上添加一个eventListener，这样每当它发生变化时，您就会遍历json 对象，当您找到匹配的元素时，您会更新input 的值。

// add the event listener
document.getElementById('bundle_typeCode').addEventListener('change', function(){

    // get the typeCode of the selected option1
    let typeCode = this.options[this.selectedIndex].value;

    // loop through the bundles
    jsonObject.details.bundles.forEach(function(e){
        if(e.typeCode == typeCode){ // a matching bundle
            // update the input's value
            document.getElementById('bundle_amount').value = e.amount;
            return true;
        }
    });

});

document.getElementById('bundle_typeCode').addEventListener('change', function(){

  let typeCode = this.options[this.selectedIndex].value;
    
  jsonObject.details.bundles.forEach(function(e){
    if(e.typeCode == typeCode){
      document.getElementById('bundle_amount').value = e.amount;
      return true;
    }
  });
        
});

let jsonObject = {  
"details":{  
"numberOfBundles":14,
"bundles":[  
{  
"amount":0.0,
"description":"200min Onnet Voice",
"typeCode":153
},
{  
"amount":1.0,
"description":"1GB Data Bundle",
"typeCode":101
},
{  
"amount":400.0,
"description":"5GB Night & Weekend Data Bundle",
"typeCode":162
     },
     {  
        "amount":3000.0,
        "description":"3GB Data Bundle",
        "typeCode":102
     },
     {  
        "amount":5000.0,
        "description":"5GB Data Bundle",
        "typeCode":161
     },
     {  
        "amount":5000.0,
        "description":"7GB Anytime data plan",
        "typeCode":164
     },
     {  
        "amount":7500.0,
        "description":"10GB Night & Weekend Data Bundle",
        "typeCode":144
     },
     {  
        "amount":9000.0,
        "description":"10GB Data Bundle",
        "typeCode":103
     },
     {  
        "amount":14000.0,
        "description":"20GB Night & Weekend Data Bundle",
        "typeCode":145
     },
     {  
        "amount":17000.0,
        "description":"20GB Data Bundle",
        "typeCode":104
     },
     {  
        "amount":36000.0,
        "description":"50GB Data Bundle",
        "typeCode":105
     },
     {  
        "amount":70000.0,
        "description":"100GB Data Bundle",
        "typeCode":142
     },
     {  
        "amount":5E+5,
        "description":"500MB Data Bundle",
        "typeCode":100
     },
     {  
        "amount":5E+5,
        "description":"200GB Data Bundle",
        "typeCode":143
}
]
}
}

<select name="bundle_typeCode" id="bundle_typeCode" class="form-control">
   <option value="153">200min Onnet Voice</option>
   <option value="101">1GB Data Bundle</option>
   <option value="162">5GB Night & Weekend Data Bundle</option>
   <option value="102">3GB Data Bundle</option>
   <option value="161">5GB Data Bundle</option>
   <option value="164">7GB Anytime data plan</option>
   <option value="144">10GB Night & Weekend Data Bundle</option>
   <option value="103">10GB Data Bundle</option>
   <option value="145">20GB Night & Weekend Data Bundle</option>
   <option value="104">20GB Data Bundle</option>
   <option value="105">50GB Data Bundle</option>
   <option value="142">100GB Data Bundle</option>
   <option value="100">500MB Data Bundle</option>
   <option value="143">200GB Data Bundle</option>
</select>

<br/><br/>

<input type="text" name="bundle_amount" id="bundle_amount" value="" placeholder="Bundle Value">