动态添加数据列表选项
adding datalist option dynamically
我正在尝试基于XML源进行动态自动完成。
这是XML:
<?xml version="1.0"?>
<liste>
<departement dep="21">
<nom>Beaune</nom>
<nom>Dijon</nom>
</departement>
<departement dep="01">
<nom>uneville</nom>
<nom>uneautreville</nom>
</departement>
</liste>
这是 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" media="all" type="text/css">
<script>
function importXML(xmlfile) {
var xmlDoc;
if (typeof window.ActiveXObject != 'undefined') {
//code for IE
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(xmlfile);
} else {
try {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", xmlfile, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
} catch (Exception) {
alert("Your browser is not supported. Try firefox !!");
}
}
return xmlDoc;
}
function loadXMLOption() {
// Load the xml file
var data="";
var xmlDoc=importXML("magasins.xml");
xmlObj=xmlDoc.documentElement;
DeviceObj = xmlObj.getElementsByTagName("departement");
for(var i=0; i < DeviceObj.length; i++) {
if (document.getElementById('departement').value == DeviceObj[i].getAttribute("dep")) {
modelObj = DeviceObj[i].getElementsByTagName("nom");
document.getElementById('magasinlist').options.length = 0;
// Create options for the Model comboBox.
for(var j=0; j < modelObj.length; j++) {
var opt = document.createElement('option');
opt.value = modelObj[j].firstChild.nodeValue;
opt.text = modelObj[j].firstChild.nodeValue;
document.getElementById('magasinlist').options.add(opt);
}
}
}
}
</script>
</head>
<body>
<H1>Tests</H1>
<div id="main">
<form method="" action="" id="cf_form">
<TABLE BORDER=0>
<TR>
<TD>TEST</TD>
<TD>
<select id="departement" onchange="loadXMLOption();">
<option value=""></option>
<option value="01">01</option>
<option value="21">21</option>
</select>
<INPUT id="magasin" list="magasinlist">
<datalist id="magasinlist">
</datalist>
</INPUT>
</select>
</TD>
</TR>
</TABLE>
</form>
</div>
</body>
</html>
问题是数据列表仍然未填充。我不明白我的错误在哪里,但它肯定有一个... -_-'
感谢您的帮助,祝您度过美好的一天:)
我找到了如何通过像这样更改 loadwml 功能来做到这一点:
function loadXMLOption() {
// Load the xml file
var data= new Array();
var xmlDoc=importXML("magasins.xml");
xmlObj=xmlDoc.documentElement;
// Get all Elements with Tag name 'departement'
DeviceObj = xmlObj.getElementsByTagName("departement");
for(var i=0; i < DeviceObj.length; i++) {
// Loop through each departement tag and check if its dep is equal to the selected departement value
if (document.getElementById(departement).value == DeviceObj[i].getAttribute("dep")) {
//alert(id);
//alert('id trouve');
// If matching device found get the model tags under that device
modelObj = DeviceObj[i].getElementsByTagName("nom");
//document.getElementById('magasin').options.length = 0;
// Create options for the Model comboBox.
for(var j=0; j < modelObj.length; j++) {
//var opt = document.createElement('option');
//opt.value = modelObj[j].firstChild.nodeValue;
//opt.text = modelObj[j].firstChild.nodeValue;
//document.getElementById('magasin').options.add(opt);
data.push(modelObj[j].firstChild.nodeValue);
//alert(data);
}
}
}
$(function() {
$( "#search" ).autocomplete(
source:data
})
}
});
}
相关文章:
- 使用js将动态内容添加到选择选项列表中
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 从ng选项列表中预选选项
- 正在从开发人员工具中的select元素打印选项列表
- HTML选择:将默认值设置为给定值,而不是从选项列表中选择
- 将过滤器添加到Angular中的选择框选项列表中
- 保留选项列表以供选择
- 在节点中实现依赖选项列表.js + express
- 在视觉效果页面中禁用从属选项列表
- 使用表排序器筛选所选选项列表中的选定项目
- jQuery 在选项列表中重新填充所选项目
- 使用 JavaScript 创建巨大的选项列表与以标记形式交付它们
- 使用 jQuery 或 Javascript 自动更新选择选项列表
- 如何在 JSHint 中设置选项列表
- Jquery函数将选项列表拆分为分层选择
- 重建选项列表时失去选择选项的焦点
- 使用javascript的表单中的两个下拉选项列表
- 如何在 Javascript 中删除多选选项列表中的重复值
- jQuery Mobile,在选项列表中选择所有项目
- 如何使ng选择's选项列表用当前的“;选择“;属性