Comment sélectionner

Question

Je Description de datalist 2 entrées dans un formulaire. Dans la première entrée, je charge un datalist à JSON. La liste json a 2 attributs et lot.

Ce que je veux est lorsque l'utilisateur de sélectionner une machine, la 2ème entrée à remplir automatiquement le lot. Par exemple, si je sélectionne 1 la deuxième entrée à remplir avec lot1.

Une autre approche consiste à sélectionner l'élément data-description. Mais je ne sais pas comment ..

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>

Le code actuel que j'utilise pour charger JSON est ceci:

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

Vous devez analyser à travers le JSON à nouveau pour obtenir le lot. Voir le code suivant.

Et vous n'avez pas besoin de définir le lot comme attribut 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); 
    }); 
});