我在一个表单中有 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();
最佳答案
您需要再次解析 JSON 才能获取批处理
。请参阅以下代码。
而且您无需将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>
关于javascript - 如何选择数据列表的描述,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40130036/