如何选择数据列表的描述

Question

我有2种输入形式。 在第一个输入中，我通过JSON加载datalist 。 json列表具有2个属性machine和lot 。

我想要的是，当用户选择一台机器时，第二个输入将自动填充很多。 例如，如果我选择1则第二个输入要用lot1填充。

另一种方法是选择data-description元素。 但是我都不知道如何..

 var dataList = document.getElementById('lots'); var jsonOptions = [{ "machine": 1, "lot": "lot1" }, { "machine": 2, "lot": "lot2" }]; // Loop over the JSON array. jsonOptions.forEach(function(item) { var option = document.createElement('option'); option.value = item.machine; option.text = item.lot; option.setAttribute('data-description', item.lot); dataList.appendChild(option); }); $(function() { $('#machine').on('change keyup', function() { var i = this.value; $('#lot').val(i); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-md-5"> <input type="text" id="machine" list="lots" class="form-control" name="machine" /> <datalist id="lots"></datalist> </div> </div> <br/> <div class="form-group"> <div class="col-md-5"> <input type="text" id="lot" class="form-control" name="lot" /> </div> </div> 

我用来加载JSON的实际代码是这样的：

var dataList = document.getElementById('lots');
var input = document.getElementById('machine');
var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);

      // Loop over the JSON array.
      jsonOptions.forEach(function(item) {
        var option = document.createElement('option');

        option.value =item.machine;
        option.text = item.lot;
        option.setAttribute('data-description', item.lot);
        dataList.appendChild(option);
      });

      // Update the placeholder text.
      input.placeholder = "machine";
    } else {
      // An error occured :(
      input.placeholder = "error:(";
    }
  }
}; 

// Update the placeholder text.
input.placeholder = "Loading options...";

// Set up and make the request.
request.open('GET', 'lots.json', true);
request.send();

Answer 1

您需要再次通过JSON进行解析以获取lot 。 请参阅以下代码。

而且您无需将lot设置为data属性。

 var dataList = document.getElementById('lots'); var jsonOptions = [{ "machine": 1, "lot": "lot1" }, { "machine": 2, "lot": "lot2" }]; // Loop over the JSON array. jsonOptions.forEach(function(item) { var option = document.createElement('option'); option.value = item.machine; option.text = item.lot; dataList.appendChild(option); }); $(function() { $('#machine').on('change keyup', function() { var i = this.value; var obj = jsonOptions.filter(function(obj){ return obj.machine === parseInt(i)}) $('#lot').val(obj[0] ? obj[0].lot : ''); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <div class="col-md-5"> <input type="text" id="machine" list="lots" class="form-control" name="machine" /> <datalist id="lots"></datalist> </div> </div> <br/> <div class="form-group"> <div class="col-md-5"> <input type="text" id="lot" class="form-control" name="lot" /> </div> </div> 

Answer 2

$(function() {
  $('#machine').on('change keyup', function() {
     var i = this.value;
    var value ="";
//fetch from the existing options
     jsonOptions.forEach(function(a){
       if(a.machine == i){
         value = a.lot;
       }
     });
     $('#lot').val(value);
  });
});