如何选择datalist的描述(How to select datalist's description)

 我在表单中有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();

I have 2 inputs in a form. In the 1st input, I load a datalist through JSON. The json list has 2 attributes machine and lot. 
 
What I want is when the user select a machine, the 2nd input to be filled automatically with the lot. For example If I select 1 the second input to be filled with lot1.
 
An another approach is to select data-description element. But neither I don't know how..
 
 
 
 
 
  
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>
 
 
 
 
 
The actual code I use to load JSON is this:
 
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();

原文：https://stackoverflow.com/questions/40130036