добавление опции datalist динамически

Я пытаюсь получить динамическое автозаполнение на основе источника XML.добавление опции datalist динамически

Вот это 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>

Вопрос заключается в том, что DataList остается незаселенной. Я не вижу, где моя ошибка, но он уверен, есть один ... -_-»

Спасибо за вашу помощь и имеет большой день :)

источник

2013-09-18 CaraLePoke

Я нашел, как это сделать, изменив loadwml funstion следующим образом:

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 
    }) 
    } 

}); 
}

источник

2013-09-20 07:14:53 CaraLePoke

добавление опции datalist динамически

ответ

Смежные вопросы