动态添加数据列表选项

我正在尝试基于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
    })
    }
});
}

相关内容

最新更新

热门标签：