Javascript 根据其他输入填写输入

我有一个有两个输入的表单，其中第一个输入有一个

datalist

属性

 <div class="col-xs-4">
     <input name="description" type="text" id="ajax" list="json-datalist">
     <datalist id="json-datalist"></datalist>
  </div>

  <div class="col-xs-2">
      <input type="text" name="product" />
  </div>

我想要的是，当用户选择一个

说明

，然后在第二个输入中添加

产品

下面是javascript的代码，其中将JSON文件加载到表单中

var dataList = document.getElementById('json-datalist');
    var input = document.getElementById('ajax');
    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) {
            // Create a new <option> element.
            var option = document.createElement('option');
            // Set the value using the item in the JSON array.
            option.value = item.description; 
                                               //<--
            // Add the <option> element to the <datalist>.
            dataList.appendChild(option);
          });

          // Update the placeholder text.
          input.placeholder = "e.g. datalist";
        } else {
          // An error occured :(
          input.placeholder = "Couldn't load datalist options :(";
        }
      }
    };

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

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

var-dataList=document.getElementById（'json-dataList'）；
var input=document.getElementById（'ajax'）；
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（响应）{
if（request.readyState==4）{
如果（request.status==200）{
//解析JSON
var jsonOptions=JSON.parse（request.responseText）；
//在JSON数组上循环。
jsonOptions.forEach（函数（项）{
//创建一个新元素。
var option=document.createElement（'option'）；
//使用JSON数组中的项设置值。
option.value=item.description；
// 您可以使用指示产品的其他属性创建
元素，然后使用该属性将其复制到第二个输入中

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) {
        // Create a new <option> element.
        var option = document.createElement('option');
        // Set the value using the item in the JSON array.
        option.value = item.description;
        $(option).attr('data-product',item.product);//THIS IS THE NEW LINE
                                           //<--
        // Add the <option> element to the <datalist>.
        dataList.appendChild(option);
      });

      // Update the placeholder text.
      input.placeholder = "e.g. datalist";
    } else {
      // An error occured :(
      input.placeholder = "Couldn't load datalist options :(";
    }
  }
};

在
datalist
的数据属性中设置
product
，如下所示

option.value = item.description; //after this line
option.setAttribute('data-product', item.product);

在
description
中，使用jquery将事件集
product
更改为第二个输入，如下所示

$('#ajax').change(function() {
        var description = $(this).val();
        var product = $('#json-datalist > option[value="' + description + '"]').data('product');
        $('input[name=product]').val(product);
    });

下面给出了完整的
JS
代码。希望对您有所帮助


var-dataList=document.getElementById（'json-dataList'）；
var input=document.getElementById（'ajax'）；
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（响应）{
if（request.readyState==4）{
如果（request.status==200）{
//解析JSON
var jsonOptions=JSON.parse（request.responseText）；
//在JSON数组上循环。
jsonOptions.forEach（函数（项）{
//创建一个新元素。
var option=document.createElement（'option'）；
//使用JSON数组中的项设置值。
option.value=item.description；
option.setAttribute（'data-product'，item.product）；
//我不确定这是否有效，我认为我的第二个代码片段在某些方面是错误的，但我想这是正确的方法。
option.attr不是一个函数。
说日志屏幕
。attr（）
是一个JQuery（）函数。如果您可以使用Jquery，它将简化您的许多工作。@pablito.aven在非Jquery HTML元素上使用Jquery方法。最简单的修复方法是
$（option）.attr（'data-prod'，item.product）；
现在我在第二部分有相同的消息。.我在Jquery删除后将其添加到页面的bootom中。
option.value = item.description; //after this line
option.setAttribute('data-product', item.product);

$('#ajax').change(function() {
        var description = $(this).val();
        var product = $('#json-datalist > option[value="' + description + '"]').data('product');
        $('input[name=product]').val(product);
    });