我有一个包含2个输入的表单,其中第一个输入具有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>
JSON文件具有此格式
[ {
"product":"1235",
"description":"description 1"
},
{
"product":"1325",
"description":"description 2"
},
...
]
我想要的是当用户选择description
中的一个,然后在第二个输入中添加product
时。
这里是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();
如果选择item.product
,如何将item.description
作为值添加到第二个输入?
答案 0 :(得分:1)
在product
的数据属性中设置datalist
,如下所示。
option.value = item.description; //after this line
option.setAttribute('data-product', item.product);
并在description
将事件集product
更改为第二个输入,如下所示使用jquery。
$('#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 = 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.setAttribute('data-product', item.product);
//<--
// 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();
$(function() {
$('#ajax').change(function() {
var description = $(this).val();
var product = $('#json-datalist > option[value="' + description + '"]').data('product');
$('input[name=product]').val(product);
});
});
答案 1 :(得分:0)
您可以使用指示产品的其他属性创建<option>
元素,然后使用该属性将其复制到第二个输入中。
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 :(";
}
}
};
然后,为了复制它,如果你使用的是JQuery:
$('input#ajax').change(function(){
$('input[name="product"]').val($('#json-dataList').find('option:selected').attr('data-product'));
});